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.
The upload example in the axios repo uses a FormData object, try adapting your code to use FormData too
const onDrop = useCallback((acceptedFiles) => {
acceptedFiles.forEach((file) => {
const data = new FormData();
data.append('file', file);
let response = axios.put(`/api/files-endpoint`, data, {
onUploadProgress: (progressEvent) => {
console.log(`progress ${progressEvent}`);
},
});
});
setFiles(acceptedFiles);
}, []);