Estoy tratando de crear una carga múltiple de arrastrar y soltar con React y react-dropzone . Todo funciona muy bien, excepto que parece que no puedo obtener la información de progreso de las cargas a pesar de que estoy usando onUploadProgress con Axios.
Aquí está el código que estoy usando:
const onDrop = useCallback((acceptedFiles) => {
acceptedFiles.forEach((file) => {
let response = axios.put(`/api/files-endpoint`, file, {
onUploadProgress: (progressEvent) => {
console.log(`progress ${progressEvent}`);
},
});
});
setFiles(acceptedFiles);
}, []);
¿Estoy haciendo algo mal? En el navegador, probé tanto con Firefox como con Chrome, incluso acelerando la conexión a 3G lento para ver si activaba la condición en esas circunstancias, pero aún no tuve suerte. Cualquier ayuda es apreciada.
El ejemplo de carga en el repositorio de axios usa un objeto FormData, intente adaptar su código para usar FormData también
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);
}, []);