1

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,

introducir la descripción de la imagen aquí

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

4
  • 1
    ¡Es que pasa por el for al instante! Deberías actualizar la barra cuando tengas la respuesta de la llamada post (usando then(...)) Commented el 2 nov. 2022 a las 10:42
  • donde tengo que colorcar el then?? Commented el 2 nov. 2022 a las 10:43
  • Mira el uso de axios.post Commented el 2 nov. 2022 a las 10:44
  • Se podría hacer también con async/await, pero esto ralentizaría la subida de ficheros Commented el 2 nov. 2022 a las 10:47

1 respuesta 1

1

Te voy a poner un ejemplo, que es tu escenario pero simplificado, para que entiendas mejor lo que está pasando:

const progresoInmediato= document.querySelector('#inmediata');
const progresoRespuesta= document.querySelector('#respuesta');

//método que devuelve una promesa, como axios.post
function simulaPost(valor) {
  return new Promise(function(success,error) {
    setTimeout(()=>success(valor), 500 * valor);
  });
}

for (let i=0; i<5;i++) {
  console.log('hago la llamada con',i);
  progresoInmediato.value= i* 25;
  simulaPost(i)
    .then(respuesta => {
      console.log('Tengo la respuesta', respuesta);
      progresoRespuesta.value= i*25;
    });
}
<label>en el FOR</label>
<progress id="inmediata" value="0" max="100"> </progress>
<br/>
<label>En el then</label>
<progress id="respuesta" value="0" max="100"> </progress>

Como puedes ver, el for se recorre al instante, no se espera a que cada promesa se resuelva. Después, conforme pasa el tiempo y obtenemos respuestas, la función que se le pasa al método then se va ejecutando.

Por tanto, lo que necesitas es que la barra de progreso se vaya actualizando ahí:

for (let i = 0; i < validFiles.length; i++) {
  ... //más código
  axios.post('url', ...)
    .then(response => {
      //actualiza la barra de progreso
    })
    .catch(...); //ha habido un error
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.