Laravel Dropzone completo: Alta, edición, procesado al ejecutar formulario

Dropzone es el plugin jQuery por excelencia para subir múltiples archivos al servidor utilizando Ajax. Lo que vamos a ver aquí es un proceso completo que te permitirá hacer la integración de forma sencilla en tus proyectos. Para ello, la lógica de nuestro Dropzone la vamos a dejar en un componente aislado. Preparar la base de datos Lo primero de todo es crear los modelos y migraciones necesarios, en este caso Attachment y Product.

Ahora vamos a actualizar las migraciones.

La tabla de Attachments la vamos a gestionar con relaciones polimórficas igual que hicimos en este curso. El resto es algo que hemos tratado demasiadas veces como para explicarlo.

Finalmente actualiza los modelos involucrados con el siguiente código.

Componente Dropzone Ahora vamos a crear el componente Dropzone, el cual nos permitirá pintar en pantalla un Dropzone que podremos utilizar en nuestro proyecto.

Ahora vamos a abrir el archivo .php.

Inicializamos una serie de datos necesarios, la clase del contenedor HTML, ruta de procesamiento, ruta de validación, ruta para redirigir al finalizar la subida y finalmente archivos para el modo edición, fíjate que es opcional (?Collection).

Ahora abrimos el archivo .blade.php y actualizamos por lo siguiente.

Algo importante es fijarse que nuestro Dropzone siempre estará dentro de un formulario, en este caso con ID #my-form. Nuestra idea es primero hacer una petición Ajax para validar nuestro formulario, y, en caso de que la validación sea satisfactoria, procesar los archivos en cola de Dropzone, pero no antes. Servicio para procesar archivos Ahora que ya tenemos nuestro componente Dropzone listo, necesitamos cierta lógica para procesar los archivos que estaremos subiendo. Estos archivos pueden subirse a nuestro sistema local de storage o a S3, lo que más nos convenga, el código será exactamente el mismo.

Crea un archivo app/Services/DropzoneService.php y actualiza su código con el siguiente.

Algo interesante que podrías hacer en nuestro servicio sería hacer que el disco pueda ser dinámico, ya que nuestra clase no es concreta para S3, sería un buen cambio.

Rutas Ahora vamos a crear las rutas necesarias para que nuestro sistema pueda mostrar y procesar información utilizando Dropzone.

Validación con FormRequest Una vez hecho, vamos a crear un FormRequest para validar nuestro formulario.

Controlador Ahora abre el controlador ProductController y actualiza el código por el siguiente.

• En nuestro controlador hacemos varias cosas. Inyectamos nuestro servicio para gestionar archivos y un repositorio para gestionar la lógica de Eloquent a través de la interfaz ProductRepositoryInterface.
• Definimos métodos para crear y actualizar datos.
• Validamos nuestro formulario utilizando nuestro ProductRequest.

Si tienes dudas acerca del patrón repositorio no te pierdas este curso.

Repositorio para Products Ahora crea el repositorio EloquentProductRepository y actualiza su código por el siguiente.

Formulario final Para finalizar nuestro ejemplo, simplemente debemos crear nuestro formulario, en este caso el archivo lo hemos llamado form.blade.php, así que créalo y modifica su código por el siguiente.

El formulario utiliza Laravel Collective, en caso de dudas revisa su documentación o los cursos de la plataforma, lo utilizamos de forma intensiva.

A partir de aquí simplemente debes ajustar toda la lógica a tus necesidades, el ejemplo es extenso pero 100% funcional para llevar a cabo complejos desarrollos con Dropzone.