Subida de archivos múltiple con Laravel y Vuejs

Vamos a ver lo sencillo que es desarrollar un sistema de subida de archivos múltiple con Laravel y Vuejs. La idea es poder desarrollar un sistema sencillo como el siguiente que nos permita seleccionar y arrastrar archivos para que puedan ser procesados por Laravel.

Para desarrollar este proyecto vamos a partir con un proyecto nuevo utilizando Laravel 6 y su nuevo sistema de autenticación, así que comencemos.

No te pierdas el curso Gestión de archivos en Laravel con relaciones polimórficas utilizando el sistema de Storage

Crear proyecto + instalación de dependencias

Lo primero que debemos hacer es ejecutar los siguientes comandos, los cuales nos permitirán crear un nuevo proyecto y hacer la instalación de las dependencias.

Como puedes ver, la dependencia que vamos a utilizar para este ejemplo es vue-upload-component, un paquete que de forma muy sencilla nos permitirá definir toda esa funcionalidad, pero no sólo eso, además también nos permitirá definir los mimes y extensiones que queremos permitir.

Desarrollar el componente MultiUploader

Para desarrollar nuestro componente con Vuejs lo primero que debemos hacer es crear un componente llamado MultipleUploader.vue en el directorio resources/js/components y añadir el siguiente código.

Lo que tenemos aquí es una tabla para listar los archivos que vayamos a subir a nuestro sistema de almacenamiento con Laravel y una zona donde arrastrar o seleccionar los archivos que deseemos añadir a la cola, así de simple.

Al seleccionar los archivos se ejecutará el método inputFilter, el cual nos permitirá aceptar o denegar los archivos a través de las validaciones que en cada caso sean oportunas.

Recuerda que además de validar los datos en el cliente para mejorar la UX, es absolutamente necesario realizar esta validación en el servidor, más aún cuando estamos permitiendo subir archivos ya que pueden ocasionar grandes daños si no se controla de forma correcta.

Una vez los archivos hayan sido validados en el cliente y estemos listos para subirlos se ejecutará el método upload, el cual simplemente preparará los datos haciendo uso de FormData para que sean enviados a Laravel y así sean procesados.

Para finalizar la zona del cliente con Vuejs debemos registrar el componente en el archivo app.js.

Rutas y vista Blade MultiUploader

Lo primero que debemos hacer ahora es crear el archivo blade multi-uploader y añadir el siguiente código, es muy sencillo.

Puedes ver que lo único que hacemos es utilizar nuestro componente para que pueda ser mostrado a través de una ruta de Laravel.

Ahora es importante ajustar el sistema de archivos de Laravel, en mi caso simplemente voy a utilizar el sistema de archivos público de la siguiente forma.

Finalmente sólo nos queda definir un par de rutas y todo estará funcionando.

Simplemente tenemos una ruta que mostrará nuestro sistema de subida de archivos múltiple y otra que se encargará de procesar los archivos que sean enviados desde Vuejs.