Skip to content

A react hook for uploading large files that need chunking.

License

Notifications You must be signed in to change notification settings

raffidil/react-chunked-uploader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM TypeScript Licence React Yarn

React Chunked Uploader

A react hook for uploading large files that need chunking (for example for uploading to Cloudinary). It uses axios and 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

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Add your changes: git add .
  4. Commit your changes: git commit -am 'Add some feature'
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request 😎

Versioning

We use SemVer for versioning.

Authors

License

MIT License © Raffi Dilanchian