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?