En este artículo vamos a mostrar como validar la extensión de un archivo mediante Javascript. Tenemos un formulario con un campo file y cuando se va a enviar el archivo, se realiza una comprobación para ver si la extensión está entre las permitidas. Si lo estuviera, se realiza el envío del formulario para hacer el upload del fichero.

En este script sólo se realiza la comprobación de la extensión, en ningún caso la recepción del fichero y su almacenamiento en el servidor, pues con Javascript no podemos realizar esas acciones, o al menos no como el Javascript del lado del navegador, que se ejecuta en el cliente y no tiene acceso al servidor para hacer un upload.

Formulario con el campo file que prentendemos validar

En este ejemplo vamos a definir un formulario con un campo file y un botón de enviar que llama a una función, que será encargada de comprobar si la extensión está permitida y submitir el formulario si todo es correcto. El formulario sería el siguiente:

<form method="post" action="tu_endpoint_para_procesar_el_archivo" enctype="multipart/form-data">
    <input type="file" name="archivoupload">
    <input type="submit" name="Submit" value="Enviar" id="submitbutton">
</form>

Es importante remarcar:

• Debes asegurarte de tener el enctype en la etiqueta del formulario si quieres subir archivos a un servidor.
• El botón de submit tiene un id para poder luego referirnos a él y añadirle el correspondiente manejador de evento click.

Añadiendo un manejador de evento para el formulario

En el código siguiente vamos a ver cómo se accede al formulario y al campo de submit. Además verás cómo invocaremos una función llamada compruebaExtension, que es la que se encargá de definir si la extensión del archivo seleccionado en el campo file es correcta.

document.addEventListener("DOMContentLoaded", function () {
    const formulario = document.getElementById('formulario');
    const botonSubmit = document.getElementById('submitbutton');

    botonSubmit.addEventListener('click', function(event) {
        event.preventDefault(); // Previene el envío normal del formulario
        const archivo = formulario.elements['archivoupload'].value;
        if (compruebaExtension(formulario, archivo)) {
            formulario.submit();
        }
    });
});

Función para validación de la extensión del archivo de upload

Ahora por fin podemos poner los ojos en la función de Javascript que se encargará de decirnos si el archivo tiene o no tiene la extensión entre las permitidas.

Vamos a ver primero el código y luego explicaremos los detalles más relevantes.

function compruebaExtension(formulario, archivo) {
    const extensionesPermitidas = [".gif", ".jpg", ".doc", ".pdf"];
    if (!archivo) {
        alert("No has seleccionado ningún archivo");
        return false;
    }

    const extension = archivo.substring(archivo.lastIndexOf(".")).toLowerCase();
    if (!extensionesPermitidas.includes(extension)) {
        alert(`Comprueba la extensión de los archivos a subir. Sólo se pueden subir archivos con extensiones: ${extensionesPermitidas.join(", ")}`);
        return false;
    }

    alert("Todo correcto. Voy a submitir el formulario.");
    return true;
}

La función compruebaExtension() recibe una referencia al formulario y la ruta del archivo que deseamos subir desde dentro de nuestro ordenador. La función realizará una serie de comprobaciones que veremos a continuación.

Lo primero que hacemos es definir un array con las extensiones permitidas para hacer el upload. También definimos una variable llamada mierror, donde vamos a guardar el texto explicativo del error, si es que se produce.

Luego comprobamos si hemos recibido una ruta del archivo. Si no hay tal ruta, se define el error correspondiente "No has seleccionado ningún archivo". En caso contrario es que tenemos una ruta, con lo que vamos a buscar el nombre del archivo.

La ruta que podemos recibir puede tener una forma como esta:

C:\directorio\otro directorio\archivo.doc

De la ruta nos interesa obtener sólo la extensión del archivo. Por lo que vamos a obtener la parte que hay después del último punto. Esto se hace utilizando varios métodos de los objetos string de javascript:

const extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();

Simplemente estamos seleccionado la parte del string que hay después del último punto. Y estamos pasándo la extensión a minúsculas, por si acaso estuviera escrita con mayúsculas.

A continuación, para comprobar si esta extensión está entre las permitidas hacemos uso de funciones integradas en Javascript como "includes()", que invocamos como método del array. Así tenemos un código de alto nivel y muy semántico.

Luego se comprueba la variable boleana permitida. Si está en false es que no se permite la extensión, entonces defino el correspondiente error. Si estaba a true es que la extensión figuraba entre las permitidas, entonces se envía el formulario y se sale de la función.

Al final de la función se muestra el posible error que se haya detectado. Sólo se mostrará el error si no se llegó a mandar el formulario, porque si se hubiera enviado, se habría salido anteriormente de la función.

Esperamos que esta validación de un campo de upload de fichero haya sido de utilidad.