Easily upload files in the background while navigating between pagesโjust like Google Drive! ๐
- ๐ Background Uploads โ Continue uploading files even when navigating between pages.
- โก Concurrent Uploads โ Control the number of parallel uploads.
- ๐ Progress Tracking โ Real-time upload progress for each file.
- โ Cancel Uploads โ Stop an ongoing upload anytime.
pnpm add react-background-file-uploader
or using npm:
npm install react-background-file-uploader
import { useBackgroundFileUpload } from "react-background-file-uploader";
const FileUploader = () => {
const { uploads, addUpload, startUpload, cancelUpload } = useBackgroundFileUpload();
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event.target.files;
if (files) {
Array.from(files).forEach((file) => addUpload(file));
}
};
return (
<div>
<input type="file" multiple onChange={handleFileChange} />
<button onClick={() => startUpload("https://your-upload-endpoint.com")}>Upload</button>
<ul>
{uploads.map((upload) => (
<li key={upload.id}>
{upload.file.name} - {upload.progress}%
<button onClick={() => cancelUpload(upload.id)}>Cancel</button>
</li>
))}
</ul>
</div>
);
};
export default FileUploader;
This hook provides all the necessary upload functions.
Method | Description |
---|---|
addUpload(file: File) |
Adds a file to the upload queue. |
startUpload(url: string, options?: UploadOptions) |
Starts uploading queued files. |
cancelUpload(id: string) |
Cancels an active upload. |
cancelAllUploads() |
Cancels all uploads that are in progress or pending. |
setMaxConcurrent(count: number) |
Sets the maximum number of concurrent uploads. |
Property | Type | Description |
---|---|---|
id |
string |
Unique file identifier. |
file |
File |
File object being uploaded. |
progress |
number |
Upload progress percentage. |
status |
'pending' 'uploading' 'success' 'failed' |
Current upload status. |
You can customize the uploader with options such as headers, body parameters, and error handling:
startUpload("https://your-upload-endpoint.com", {
headers: { Authorization: "Bearer token" },
extraBody: { folder: "uploads" },
onSuccess: (file, response) => console.log("Upload Success", file, response),
onError: (file, error) => console.error("Upload Failed", file, error),
onAbort: (file) => console.warn("Upload Aborted", file),
});
Check out the live example: React Background File Uploader Example
Explore the example code: GitHub Example
- Fork this repository
- Clone it:
git clone https://github.com/akshays-repo/react-background-file-uploader
- Install dependencies:
pnpm install
- Make your changes and submit a PR ๐
MIT License ยฉ 2025 Akshay S
- Akshay S
- ๐ง Email: [email protected]
React file uploader, background file upload, resumable upload, React file upload hook, concurrent file upload, real-time file upload, cancel file upload, upload progress tracking, seamless file upload, React background uploader