Chunked uploads with react-dropzone

Question

I would like to upload chunked files using React-Dropzone. I have the following code:

OnDrop:

const dropTest = async (file, rejectedFiles) => {
    var formData = new FormData();
    formData.append('file', file);
    try {
      const response = await fetch(appContext.api_url + 'ApiUser/fileUpload', {
        method: 'POST',
        body: formData
      })
      const result = await response.json();
    } catch (error) {
      console.error('Error:', error);
    }
}

Render:

<Dropzone onDrop={dropTest} chunking={true}>
  {({getRootProps, getInputProps}) => (
      <section>
         <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>Drag 'n' drop some files here, or click to select files</p>
          </div>
      </section>
  )}
</Dropzone>

Dropzone library has an api, name of {chunking: true}, but It's not working on react-dropzone, how can I archieve this?

If it is not possible with React-Dropzone, I can get suggestions about another chunking upload solutions for react.

can recommend github.com/rpldy/react-uploady - a little because I wrote it, but also because it handles this use-case and much more :) — poeticGeek

Adrimeov Adrimeov · Accepted Answer · 2020-09-24T20:05:48

As far as I know, react-dropzone does not support chunking. Those features are available in the fineuploader librairie (it is supported in REACT here is the link). It gives you the ability to build DropZone, ProgressBar, Chunking, Retry and much more. It is also well documented.

Chunked uploads with react-dropzone

1 Answers