3

Estoy haciendo un proyecto en el que nesecito subir archivos a un servidor, ya hice todo, pero nesecito saber como ejecutar un alert cuando la barra de progreso se llene(basicamente detectar cuando la barra de progreso llegue el 100%)

¿Alguien me puede ayudar?

Parte del codigo:

Barra

 <progress id="img-upload-bar" value="0" max="100" style="width: 100%">   </progress>

Para que la barra de progreso aumente su valor

const res = await axios.post(CLOUDINARY_URL, formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    onUploadProgress(e){
        console.log(Math.round((e.loaded * 100) / e.total));
        const progress = (e.loaded * 100) / e.total;
        imageUploadbar.setAttribute('value', progress);
    }
    
})
2
  • ¿Podrías agregar tu código, por favor? Sin código será muy poca la ayuda que podrás obtener
    – Rodrigo
    Commented el 3 mar. 2021 a las 1:29
  • el unico codigo que pueda servir de algo seria el de la barra de progreso, te lo doy?
    – Lina109
    Commented el 3 mar. 2021 a las 1:30

1 respuesta 1

2

1.- Puedes simplemente poner el alert inmediatamente después de que realizas la subida al servidor ejemplo:

const res = await axios.post(CLOUDINARY_URL, formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    onUploadProgress(e){
        console.log(Math.round((e.loaded * 100) / e.total));
        const progress = (e.loaded * 100) / e.total;
        imageUploadbar.setAttribute('value', progress);
    }
    
})

alert("Archivo subido correctamente");

El alert se ejecutará una vez que termine todo lo anterior gracias a async await

Aunque lo ideal sería evaluar tu respuesta ejemplo:

if(res.status === 200){
 alert('Archivo subido correctamente');
}
2
  • Gracias por la ayuda, lo probare :)
    – Lina109
    Commented el 3 mar. 2021 a las 1:49
  • @Lina109 agregue una nueva línea de código a mi respuesta para afinar mejor tu código. Commented el 3 mar. 2021 a las 1:51

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.