React Chunked Uploader
A react hook for uploading large files that need chunking (for example for uploading to Cloudinary). It uses
axiosand provides loading state and progress value.
Installation
yarn add react-chunked-uploader
or
npm i react-chunked-uploader
Usage
Import the hook from the package:
import useChunkedUploader from 'react-chunked-uploader';
Into your React component:
const { uploadFile, cancelUpload, isLoading, progress } = useChunkedUploader();
const uploadImage = async (file: File, data: FormData) => {
try {
const result = await uploadFile({ file, url: 'YOUR_UPLOAD_URL', data });
return result;
} catch (error) {
console.error(error);
}
};
API
uploadFile
A function to upload a file with specific form data.
uploadFile({ file, url, data, chunkSize });
Options:
| Name | Type | Required | Default value |
|---|---|---|---|
file |
File | yes | - |
url |
string | yes | - |
data |
FormData | no | - |
chunkSize |
number (Bytes) | no | 6 * 1024 * 1024 |
Return type:
Promise<AxiosResponse[]>;
isLoading
A boolean that indicates the loading status of the uploading data.
| Name | Type | Default value |
|---|---|---|
isLoading |
boolean | false |
progress
A number that indicates the progress value of the uploading process.
| Name | Type | Default value |
|---|---|---|
progress |
number | 0 |
cancelUpload
A function to cancel upload operation.
| Name | Type |
|---|---|
cancelUpload |
() => void |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Add your changes:
git add . - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
😎
Versioning
We use SemVer for versioning.
Authors
- Raffi Dilanchian - raffidil
License
MIT License © Raffi Dilanchian
17 Jul 31, 2022
45 Dec 24, 2022
31 Dec 13, 2022
2 Oct 6, 2021
5 Dec 12, 2022
61 Jan 5, 2023
403 Dec 25, 2022
38 Dec 19, 2022
5.5k Jan 3, 2023
102 Nov 21, 2022
9 Jun 20, 2022
6 Sep 19, 2022
5 Dec 11, 2022
66 Mar 27, 2021
1.1k Dec 30, 2022
8 Dec 7, 2022
3.3k Dec 27, 2022