Estoy haciendo un drag&drop que contiene un progress bar rojo o verde segun la carga sea valida o fallida. Quiero que se me cargue la barra cada vez que sube el archivo, pero no lo hace asi, lo hace todo de golpe. ¿Cómo podria arreglarlo?
const nFiles = validFiles.length //numero de archivos validos
let porcentaje = 100 / nFiles //porcentaje que corresponde cada archivo
const uploadModalRef = useRef();
const uploadRef = useRef();
const progressRef = useRef();
const uploadFiles = () => {
uploadModalRef.current.style.display = 'block';
uploadRef.current.innerHTML = `Está subiendo ${nFiles} archivos... <br>Se subirán en segundo plano`;
// progressRef.current.style.width = `${progress}%`
let progress = 0
updateseeList(false)
for (let i = 0; i < validFiles.length; i++) {
console.log(i)
// progress = porcentaje
progressRef.current.style.backgroundColor = '#8dd4bd';
progress += porcentaje
progressRef.current.style.width =`${progress}%` ;
const formData = new FormData();
formData.append('file', validFiles[i]);
formData.append('key', 'add your API key here');
axios.post('url', formData, {
headers: {
// 'Accept': 'application/file',
'Content-Type': 'multipart/form-data',
'Access-Control-Allow-Origin': '*',
'Authorization': `Bearer ${UserService.getToken()}`
},
}
)
.catch(() => {
// If error, display a message on the upload modal
uploadRef.current.innerHTML = `<span class="error">Error Uploading File(s)</span>`;
// set progress bar background color to red
progressRef.current.style.backgroundColor = 'red';
progress += porcentaje
progressRef.current.style.width = `${progress}%`;
});
console.log(porcentaje)
console.log(progress)
}
}
<button className="file-upload-btn" onClick={() => uploadFiles()}> //donde llamo a la funcion
Me sale directamente asi,
Tanto el OK como el ERROR se me cargan directamente, y mi intención es que pinte el trocito correspondiente cada vez que pasa por el for
then(...)
)