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 https://github.com/rpldy/react-uploady - a little because I wrote it, but also because it handles this use-case and much more :) — poeticGeek, Jul 25 '20 at 08:19
Loading the file from the file system and uploading it to a server are two different steps. You could load the full file from the file system (via `react-dropzone`), and still send it in chunks to the server, if that's feasible for your use case. — kca, Mar 16 '23 at 11:21

score 2 · Answer 1 · answered Sep 24 '20 at 20:05

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 Answers1