Wednesday, 28 September 2022

How to get upload progress for multiple files? (React + React-dropzone + Axios + onUploadProgress)

I'm trying to create a multi upload drag and drop with React and react-dropzone. Everything works great except that I can't seem to get the progress information for the uploads even though I'm using onUploadProgress with Axios.

Here's the code I'm using:

const onDrop = useCallback((acceptedFiles) => {
 acceptedFiles.forEach((file) => {
  let response = axios.put(
  `/api/files-endpoint`,
  file,
  {
    onUploadProgress: (progressEvent) => {
      console.log(`progress ${progressEvent}`);
    },
  }
);
 });

 setFiles(acceptedFiles);
}, []);

Am I doing something wrong? In the browser I have tried with both firefox and chrome, even throtthling the connection to slow 3g to see if it will trigger the condition on those circunstances but still no luck. Any help is appreciated.



from How to get upload progress for multiple files? (React + React-dropzone + Axios + onUploadProgress)

No comments:

Post a Comment