Today we'll introduce 7 best open source and commercial file upload libraries for React. These libraries provide various features, making it easy for developers to implement file uploads in their applications.

Open Source Library

1.react-uploady

Recommend: ⭐⭐⭐⭐⭐ (5.0)

[Demo] [Github]

React-Uploady is a lightweight library that enables React application developers to build file-upload features with just a few lines of code.

Core Features:

• Custom Upload Button
• Progress Hook
• Resumable uploads
• Chunked uploads

2. react-fine-uploader

Recommend: ⭐⭐⭐⭐ (4.0)

[Github]

Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. This project has been discontinue, but it's still a great project.

Core Features:

• Progress Bar
• Drag and Drop
• Retry
• Validators
• File Chunking
• Resume Uploads

3. react-dropzone

Recommend: ⭐⭐⭐⭐ (4.0)

[Github] [Document]

It's a simple React hook to create a HTML5-compliant drag'n'drop zone for files.

Core Features:

• Drag & Drop
• Accepting specific file types
• Accepting specific number of files
• Custom validation
• Previews

Source code

 1import React from 'react';
 2import {useDropzone} from 'react-dropzone';
 3
 4function Basic(props) {
 5  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
 6  
 7  const files = acceptedFiles.map(file => (
 8    <li key={file.path}>
 9      {file.path} - {file.size} bytes
10    </li>
11  ));
12
13  return (
14    <section className="container">
15      <div {...getRootProps({className: 'dropzone'})}>
16        <input {...getInputProps()} />
17        <p>Drag 'n' drop some files here, or click to select files</p>
18      </div>
19      <aside>
20        <h4>Files</h4>
21        <ul>{files}</ul>
22      </aside>
23    </section>
24  );
25}
26<Basic />

4. react-filepond

Recommend: ⭐⭐⭐⭐ (4.0)

[Github]

React FilePond is a handy wrapper component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Core Features:

• Drag & Drop
• Async uploading
• Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
• Image optimization, resizing, cropping, and fixes EXIF orientation.
• Responsive

5. use-tus

Recommend: ⭐⭐⭐⭐ (4.0)

[Demo] [Github]

React hooks for resumable file uploads using tus.

Core Features:

• Resumable file uploads on react.
• Lightweight and simple interface hooks.
• Managing the Upload by using context.
• TypeScript support.

Commercial Library

1. Upload.js

Recommend: ⭐⭐⭐⭐ (4.0)

[Homepage]

Upload.js comes pre-integrated with cloud-based file storage.

Core Features:

• Support Multipart File Uploads, automatically switches between single and multipart file uploads based on file size, making it suitable for large file
• Support file upload progress bars and percentages.
• Configurable File Upload Validation Rule
• Lightweight (6KB)

2. js-file-upload

Recommend: ⭐⭐⭐⭐ (4.0)

[Homepage] [Demo]

The JavaScript File Upload is a control for uploading one or multiple files, images, documents, audio, video, and other files to a server.

Core Features:

• AJAX file upload
• Upload large files
• Resumable upload
• Multiple file upload
• Drag and drop
• Upload images with previews
• Custom file upload button
• Custom file types
• File validation
• Upload folder
• Progress bar
• Localization
• etc

Conclusion

Explore these libraries to find the one that best fits your needs and implement a file upload feature in your React application with ease.