Entonces, lo que está sucediendo es que estoy un poco atascado con las extensiones de fileApi, no puedo ver cómo debo mostrar la alerta cuando el archivo de carga no es .pdf , por ejemplo. Realmente me encantaría alguna orientación. Gracias
Html <form action="/Document" method="post" enctype="multipart/form-data"> <div class="container"> <div class="custom-file" style="margin-top: 25px; margin-bottom: 15px;"> <input type="file" id="validatedCustomFile" name="document" required> <div style="color: red;"></div> </div> <div class="small"> <ul> <li>Maximum upload size is / 1024) KB</li> </ul> </div> <div> <button type="submit" title="Next" class="btn btn-primary">Next</button> </div> </div> </form> <script> Js const InputFile = document.getElementById('validatedCustomFile'); InputFile.addEventListener("change", function () { console.log(InputFile.files) for (const file of InputFile.files) { if (file.size > 1048576){ alert(`${file.name} is to big! Max is 1024KB`); } if (file.type != '.pdf') { alert('This file type not allowed to be uploaded') } } } ) </script>Hay un método simple para hacerlo, simplemente agregando a su formulario input accept=".pdf" La página de carga solo mostrará el archivo con la extensión .pdf y ocultará el resto. Algo como esto: <input type="file" id="validatedCustomFile" accept=".pdf" name="document" required> funcionaría.
aquí, debe configurar el tipo de archivo mime. Aquí, mencioné application/pdf en lugar de ".pdf"
const InputFile = document.getElementById('validatedCustomFile'); InputFile.addEventListener("change", function () { console.log(InputFile.files) for (const file of InputFile.files) { if (file.size > 1048576){ alert(`${file.name} is to big! Max is 1024KB`); } if (file.type != 'application/pdf') { alert('This file type not allowed to be uploaded') } } } )