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

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