Comparte en Facebook Twitter Google+

dropzone-laravel-5

En un post anterior les hablaba sobre  Cómo subir archivos con Laravel 5 usando la clase Storage(), el día de hoy les enseñaré un ejemplo básico de cómo usar Dropzone, una librería en javascript que permite la subida de archivos con  drag and drop. 

Lo primero que debemos hacer es descargar la librería desde la página oficial (link al final del post), o desde este repositorio en Github:

https://github.com/enyo/dropzone

Una vez descargado busca dentro del directorio una carpeta llamada dist, y copia los archivos dropzone.css y dropzone.js dentro del directorio public de tu aplicación de Laravel.

Personalmente recomiendo ubicar cada archivo en la carpeta correspondiente js/dropzone.js, css/dropzone.css, y además dentro de public crea una nueva carpeta llamada uploads, allí será donde se almacenarán todos los archivos que vamos a enviar desde el formulario. Al final tendrás algo parecido a esto:

Para integrar el plugin se deben agregar los archivos css y js a la vista, esto se pude hacer incluyendo los enlaces directamente desde el archivo app.blade.php, pero, como no serán necesarios para todas las vistas prefiero agregarlos de la siguiente forma:

Ingresamos al archivo resources/views/app.blade.php que es la plantilla que trae por defecto Laravel 5 y de la cual extienden las demás vistas y, en lugar de agregar los enlaces, le indicamos que incluya dos nuevas secciones con:

esta sección “css” será para los estilos y al final del archivo agregamos esto para los scripts:

Si estás usando Laravel 5.1, ya no trae por defecto el archivo app.blade.php, pero lo podemos crear fácilmente en el directorio resources/views así:

Bien, vamos crear ahora la vista del formulario con la cual subiremos los archivos a la aplicación, para ello creamos una nueva vista llamada form.blade.php

Para que el formulario funcione debes tener implementado en el proyecto los componentes Html y Form, si no sabes cómo puedes revisar Instalación del paquete Styde\Html.

La variable autoProcessQueue la dejamos en false para que la subida se haga manualmente con el botón submit, activamos la opción uploadMultiple para indicar que vamos a enviar varios archivos y definimos también el tamaño y la cantidad de archivos permitidos en la subida. Si lo deseas, en la configuración puedes indicar cuantos archivos se subirán en paralelo con parallelUploads, por defecto se suben de dos en dos.

Recuerda que todas estas validaciones son para el frontend, para una aplicación en producción es imprescindible realizar las validaciones igualmente en el backend.

Dropzone se encarga de manejar la subida de archivos al form con drag and drop, muestra una miniatura y ofrece información sobre el estatus del proceso, pero recuerda que se trata de javascript y todo esto ocurre de parte del cliente, ahora debemos crear la lógica para capturar los archivos en el submit y almacenarlos en el servidor.

Como puedes ver en la vista, el formulario apunta a la ruta file.store, la definimos de la siguiente forma para ahorrar un poco de tiempo:

Con ello, estamos creando un recurso llamado file y lo asociamos a un controlador llamado FileController que podemos crear desde la consola usando artisan:

Si quieres ver las rutas disponibles con la creación del recurso file puedes ejecutar desde la consola

Vamos a editar la función store() del controlador FileController de esta forma :

En esta función se define la ruta al directorio donde se subirán los archivos, en nuestro caso uploads, se recibe un array de los archivos enviados y luego se recorre este array para obtener el nombre original y moverlo al directorio final.

Debemos tambien editar la funcion index del controlador para que devuelva la vista del formulario:

Si ingresamos a la url ruta_de_tu_proyecto/file podremos ver el formulario:

Para agregar archivos basta con hacer click sobre el cuadro vacío, donde te saldrá un cuadro de dialogo o puedes arrastrar y soltar directamente.

En este punto los archivos están preparados para guardar pero no han sido almacenados en el servidor, para ello debes hacer click en el botón save.

Al finalizar la subida el formulario se limpia nuevamente para que puedas seguir subiendo nuevos archivos.

Para confirmar que todo ha salido bien puedes verificar el directorio uploads 

Epero que te haya gustado el post, recuerda compartir en tus redes sociales y como siempre no olvides dejar tus comentarios y sugerencias.

Lecturas recomendadas

Información adicional 

Aprende PHP, Laravel y más por sólo 999 al mes: ver planes.

Lección anterior Creando menús con el componente Styde\Html Lección siguiente Traducciones con el componente Styde\Html