1

Tengo un input tipo file donde cargo un archivo (imagen o pdf), cuando doy click y selecciono un archivo me lanza un popup preguntando si es el archivo correcto, si le pongo que "No" me deja escoger otro archivo.

Hasta aquí todo bien, el problema es cuando selecciono "No" e intento cargar nuevamente el mismo archivo, me deja escoger el archivo pero no me lanza el popup, ni siquiera entra a la función. Esto no pasa cuando escojo un archivo diferente al primero que escogí.

En mi HTML tengo algo como esto:

<img class="btn" id="img2" src="~/Content/Icono_Carga.png" onclick="cargarImg()" />
<input type="file" accept="application/pdf image/jpeg image/jpg" class="inputfile" name="files" id="pdf-upload" value="" required />
<label for="files"></label>

Y en el JavaScript algo así:

function cargarImg() {
            console.log("Aqui si entra");
            $('#errorPdf').hide();
            $('#pdf-upload').click();
        }

function readFile(file) {
          console.log("Aqui no entra");
          var reader = new FileReader();
            if (file) {
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    document.getElementById("img").src = reader.result;

                    validaImag = reader.result;
                }
            }
        }

document.querySelector("#pdf-upload").addEventListener("change", function (e) {

            console.log("No entra");
            var filesize = this.files[0].size;
            var valid = true;
            var file = e.target.files[0]
            if (file.type != "application/pdf" || filesize > 5000000) {
                if (file.type == "image/jpeg" && filesize < 5000000) {
                    readFile(file)
                } else {valid = false;}
            }
            var fileReader = new FileReader();
            fileReader.onload = function () {
                var typedarray = new Uint8Array(this.result);
                pdfjsLib.getDocument(typedarray).then(function(pdf) {
                    pdf.getPage(pdf.numPages).then(function (page) {
                    var viewport = page.getViewport(1.0);
                    canvas = document.querySelector("canvas")
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                        page.render({
                        canvasContext: canvas.getContext('2d'),
                            viewport: viewport
                        });
                    });
                });
            };

            if (valid) {
                Swal.fire({
                    text: "¿Estás seguro de que éste es el documento que deseas enviar?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#4CAF50',
                    cancelButtonColor: '#d33',
                    cancelButtonText: 'No',
                    confirmButtonText: 'Sí, continuar'
                }).then((result) => {
                    if (result.value) {
                        if (file.type == "image/jpeg") {
                            $('#imgStatus1').show();
                        } else {
                            $('#imgStatus1').show();

                            $('#canvas').show();
                        }

                    } else {
                        $('#imgStatus0').show();
                        $('#errorPdf').show();
                        $('#canvas').hide();   
                    }
                });
            } else {
                Swal.fire({
                    text: "Solo puedes cargar archivos PDF o imagen JPEG con tamaño menor a 5Mb",
                    icon: 'error',
                    showCancelButton: false,
                    confirmButtonColor: '#4CAF50',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    $('#imgStatus0').show();
                    $('#canvas').hide();
                });
            }



            fileReader.readAsArrayBuffer(file);
        })

Todo funciona correctamente si escojo un archivo diferente cada vez, el único problema es cuando vuelvo a seleccionar el mismo archivo. ¿Hay algo que esté haciendo mal que no me lee el mismo archivo dos veces?

1 respuesta 1

1

El problema es el evento change del HTMLInputElement, el cual se desencadena solo cuando hay cambios en el input.

El problema es que en tu caso, al ser un tipo file, los cambios son detectados solo si se detecta que el archivo o los archivos seleccionados no coinciden exactamente con la cola de archivos actual.

Por lo que ya sabemos porque tu función solo se dispara al poner nuevos archivos, por que la cola en ese caso difiere y lo detecta como un cambio.

Para solucionarlo puedes almacenar tus archivos en otra parte, (por ejemplo una constante global) y al momento de entrar al change guardar el archivo en ese Array y luego automáticamente eliminarlo de la cola del input file:

const archivosSeleccionados = [];

//Todo tu codigo....

document.querySelector("#pdf-upload").addEventListener("change", function (e) {

     var filesize = this.files[0].size;
     var valid = true;
     var file = e.target.files[0];

     archivosSeleccionados.push(file);

     //Reiniciamos la cola de archivos.
     e.currentTarget.files = null;
     console.log(archivosSeleccionados.length);

});
<input type="file" accept="application/pdf image/jpeg image/jpg" class="inputfile" name="files" id="pdf-upload" value="" required />

Como vemos, la cola al ser vaciada tiene la oportunidad de nuevo de añadir nuevos archivos aunque la nueva cola de archivos fuese igual a la antigua.

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.