DEV Community: Fii

React hook based library for File uploads to AWS S3 and Other cloud storages.

Fii — Sun, 19 Jan 2025 09:31:08 +0000

Hey guys 👋

I've made an open source file upload library apexx-uploader-react that makes it easy to implement file uploads to Cloud storages like AWS S3, I have been implementing file uploads in my projects more often and always noticed that the libraries available have minimal ui customisation and control. I wanted to build something that handles all the hard stuff for me like actually doing the uploads, tracking progress, implement multipart uploads for large files, ability to cancel uploads etc.

I made a hook based library so that you can build your own UI components for the best look and feel you want for your apps but I will also have prebuilt components that you can use in your apps, this will be available as source code similar to Shadcn so you can change the UI anyway you wish and can reuse it across projects. Other libraries have a closed component model where they expose props for customisation, honestly this customisation is very limited and doesnt make sense in a production environment where we want to build the UI according to the actual designs.

Here's why it's awesome:
🚀 Hook-based for total control
🎨 Fully customizable UI
📂 Multipart uploads, cancellations & progress tracking
📁 Multi-file uploads
☁️ Works out of the box with AWS S3
⚡ Minimal server-side setup (Just one function)
💻 Source code & prebuilt components

Architecture:

The uploads are done on the client side using presigned urls, The library generates presigned url for simple put uploads and also for the multipart uploads. On the server side you just need to expose an api that returns the presigned url which is then used by the client to do the actual uploads. Presigned urls are the most secure way to do uploads on the client and doing the uploads on the client side reduces the extra latency when done through your backend, Multiparts are usually done using presigned urls as well so its easier.

The useUploader hook returns a upload function and other things required. Here's the code

const {
  upload,           // Function to start the upload
  cancelUpload,     // Function to cancel all uploads
  cancelFileUpload, // Function to cancel a specific file
  files,           // Current state of all files
  totalProgress,   // Overall upload progress (0-100)
  status          // Current upload status
} = useUploader({
  provider: "aws", // or "apexx"
  getSignedUrl: async (operation, params) => {
    // Your implementation to get signed URL
    return signedUrl;
  }
});

You also get progress on a per file level, status on a per file level, error on a per file level and you also cancel uploads on a per file level giving you more control to create Your very own UI layer.

Here's the live demo

I'm also looking for contributors to work with me on this project so we as a community can make it easy to do file uploads easier for free, There are even products that charge subscription for making file uploads easy for developers but honestly i think this should just be a library and not a S3 wrapper that charges 10 dollars a month.

github link: https://github.com/apexxcloud/apexx-uploader-react

I made file uploads Easy for Free, Completely Open Source. Works with S3 out of the box.

Fii — Sat, 18 Jan 2025 20:21:08 +0000

Hi guys, I Made an simple yet powerful Open source library for handling file uploads that works with S3 out of the box and you don't have to pay for it like something else (hehehe uploadThing).

I built this in the last couple of days, I created a core javascript library that handles all the logic that gives two methods upload and uploadMultipart, you just pass in the files, and some options and you are done. The library handles all the hard stuff for both simple put uploads and also multipart uploads.

I think as a community we can actually create a good library that will be helpful for all developers like us, If any wants to contribute i will be super happy.

check it out here

How to implement File uploads in Nodejs: A step by step guide

Fii — Thu, 02 Jan 2025 11:44:33 +0000

Introduction

Hi, In this article we will see how to handle file uploads in a nodejs server and storing it with best practices. I will be using Apexx cloud as our file storage service.

Install the packages

npm i express nodemon cors multer @apexxcloud/sdk-node dotenv

Once installed, update your package.json to add the start script

"scripts":{
 "start": "nodemon index.js",
 // rest of the scripts
}

Create a index.js file in the root folder, then create a folder called src. In the src folder create the folders for controllers and routes respectively, Your folder structure should look something like this.

project-root/
│
├── index.js              # Entry point of the application
├── package.json          # Project metadata and dependencies
├── package-lock.json     # Auto-generated dependency tree
├── node_modules/         # Installed dependencies
│
└── src/
    ├── controllers/      # Contains controller files
    │   └── file.controller.js
    │
    ├── routes/           # Contains route files
    │   └── file.route.js

Setup Apexx cloud

Login to Apexx cloud or create a new account here
Navigate to buckets.
Click on "Create bucket" and provide a unique name for your bucket.
Select the desired region
Review and create the bucket
Navigate to Api keys
Click on "Create API Key" and provide a name for your key
Review and create the key
Copy your secret key and store it somewhere securely.
Then copy your access key as well.

Lets start writing some code

Lets start writing our controller that will handle the request in file.controller.js.

// Setup our apexx cloud sdk
const ApexxCloud = require("@apexxcloud/sdk-node");
const storage = new ApexxCloud({
  accessKey: process.env.APEXXCLOUD_ACCESS_KEY,
  secretKey: process.env.APEXXCLOUD_SECRET_KEY,
  region: process.env.APEXXCLOUD_REGION,
  bucket: process.env.APEXXCLOUD_BUCKET,
});

// Upload file function
const uploadFile = async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: "No file provided" });
    }
    const { originalname, filename, size, path, mimetype } = req.file;

    const { key, visibility } = req.query;

    const result = await storage.files.upload(req.file.buffer, {
      key: key || orginalname,
      visibility: visiblity || "public",
      contentType: mimetype,
    });

    res.status(200).json(result);
  } catch (error) {
    console.log(error);
    res.status(500).json({ error: `File upload failed: ${error.message}` });
  }
};

First we are importing @apexxcloud/sdk-node and we are creating a storage object by passing in the credentials. Then we are creating the function called uploadFile, In the function we are getting the key and visibility from req.query and file details from req.file

Then we are using the upload function from the apexx cloud sdk to upload it to apexx cloud. When uploading you can configure the visibility of the file, It can be public or private, All the files are public by default.

Now lets setup the routes in file.route.js.

const express = require("express");
const router = express.Router();
const multer = require("multer");
const { uploadFile } = require("../controllers/file.controller")

// setup multer
const upload = multer({ storage: multer.memoryStorage() });

// setup the route
router.post("/upload", upload.single("file"), uploadFile);

// export the router
module.exports = router

Then lets setup the index.js file.

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const cors = require("cors");

// load env variables
dotenv.config();

// import file route
const fileRoute = require("./src/routes/file.route");

// setup express
const app = express();

app.use(express.urlencoded({ extended: true, limit: "100mb" }));
app.use(express.json({ limit: "100mb" }));
app.use(cors());

// setup the file route
app.use(fileRoutes);

const port = 8000
app.listen(port, () => {
  console.log(`Server running at port:${port}`);
});

Open your terminal and run:

npm start, If everything went right, it should log "Server running at port:8000".

Testing the API

We'll test the API using postman.

Select Body, check form-data, add a key called file and set the type to file. Upload your file then click send.

You should get a response as below:

{
    "data": {
        "message": "File uploaded successfully",
        "key": "file.png",
        "location": "https://cdn.apexxcloud.com/f/ojGnBqCLkTnI/file.png",
        "bucket": "your-bucket-name",
        "region": "WNAM",
        "visibility": "private",
        "size": 14513,
        "content_type": "image/png"
    }
}

Indicating that the file has been uploaded. Go to your Apexx Cloud dashboard, Then go to your bucket, you shoud see the file you uploaded there.

And that's it, you have successfully implemented file uploads in nodejs and the best part is Apexx Cloud provides you with on the fly transformations and a superfast CDN for free. To know more go here, for the documentation go here.

Conclusion

This article has successfully taught you how to handle file uploads in a nodejs application using Apexx Cloud and Multer.

In the next article I will show how to use AWS S3 for file uploads, until then Signing Off - Your's FII

Never worry about file uploads: Sign up for Apexx Cloud Today, It's Free