Codemaster
Tutoriales

Como subir imágenes al servidor con DropZone y Laravel

Jesús Quintana •
#backend#Laravel#dropzone

¿Qué es dropZone?

DropZone

Dropzone es un plugin de JavaScript que proporciona una forma sencilla de agregar funcionalidad de carga de archivos a un blog o cualquier otra aplicación web. Con Dropzone, los usuarios pueden arrastrar y soltar archivos desde su computadora directamente en el área de carga del blog, lo que facilita y agiliza el proceso de subir imágenes u otros archivos.

Una de las principales ventajas de Dropzone es su facilidad de uso e integración con frameworks como Laravel. Puedes agregar Dropzone a tu blog simplemente incluyendo su archivo JavaScript y CSS en tu página, y luego añadiendo el código HTML necesario para mostrar el área de carga.

Una vez que Dropzone esté configurado, los usuarios podrán seleccionar archivos desde su computadora y soltarlos en el área de carga. Dropzone se encargará de subir los archivos al servidor de manera eficiente y sin necesidad de recargar la página. Además, Dropzone ofrece características adicionales como la visualización de una miniatura previa de la imagen antes de la carga, límites de tamaño y tipo de archivo, y la posibilidad de personalizar el diseño y el comportamiento del área de carga.

Conclusión, Dropzone es una herramienta poderosa y fácil de usar que permite a los usuarios cargar archivos de manera rápida y sencilla en un blog. Proporciona una experiencia de usuario mejorada y agiliza el proceso de carga de archivos, lo que resulta beneficioso tanto para los administradores del blog como para los usuarios que desean compartir contenido multimedia.

Características

DropzoneJS ofrece las siguientes características:

En este momento, DropzoneJS es compatible con los siguientes navegadores:

¿Cómo implementar dropzone en nuestras vistas Laravel?

Para entender esta parte vamos a utilizar el código de un proyecto real. En este ejemplo utilizamos los estilos de bootstrap, aunque esto es opcional puede utilizar los estilos que más le apetezcan para su proyecto personal.

@extends('layout.layout') <!-- Extiende la plantilla de diseño llamada 'layout.layout' -->

@section('title', 'Página de inicio') <!-- Define el título de la página -->

@section('content') <!-- Inicia la sección de contenido principal -->
    <section class="container mt-8 ">
        <div class="form-group">
                    <!-- DropZone -->
                    <form action="{{ route('fotos.store') }}" method="POST" enctype="multipart/form-data" class="dropzone"
                        id="myDropzone">
                        @csrf
                        <input type="hidden" name="anuncio_id" value="{{ $anuncio->id }}">
                    </form>
                </div>
            </div>
        </div>

    </section>
@endsection

@section('css')
    <!-- Estilos de la vista-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css"
        crossorigin="anonymous" />
@endsection

@section('js')
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
        Dropzone.options.myDropzone = {
            paramName: 'imagen',
            maxFilesize: 2, <!-- Tamaño máximo del archivo en megabytes -->
            acceptedFiles: '.jpg, .jpeg, .png', <!-- Tipos de archivo aceptados -->
            dictDefaultMessage: 'Arrastra los archivos aquí para subirlos',
            maxFiles: 6, <!-- Límite máximo de archivos -->
            init: function() {
                this.on('error', function(file, errorMessage) {
                    // Manejar errores de carga de archivos aquí
                });
            },
        };
    </script>
@endsection

¿Qué hace?

Este código muestra un formulario de carga de archivos utilizando la biblioteca Dropzone en una vista de Laravel. Veamos cada parte del código:

  1. <div class="form-group">: Esto crea un contenedor HTML con la clase CSS “form-group”. Se utiliza para agrupar elementos relacionados en un formulario.

  2. <form action="{{ route('fotos.store') }}" method="POST" enctype="multipart/form-data" class="dropzone" id="myDropzone">: Este es el formulario principal que utiliza Dropzone para cargar archivos. Algunos aspectos a destacar:

    • action="{{ route('fotos.store') }}": El atributo “action” especifica la ruta a la que se enviarán los archivos cargados cuando se envíe el formulario. Aquí se utiliza la ruta “fotos.store” que probablemente esté definida en el archivo de rutas de Laravel.
    • method="POST": Especifica que la solicitud se realizará utilizando el método HTTP POST.
    • enctype="multipart/form-data": Se establece para permitir el envío de archivos binarios en el formulario.
    • class="dropzone" id="myDropzone": La clase CSS “dropzone” se agrega al formulario para indicar que se debe aplicar el estilo y comportamiento de Dropzone. El ID “myDropzone” se utiliza para inicializar Dropzone a través de JavaScript.

  3. @csrf: Esta directiva de Blade genera un campo de token CSRF oculto en el formulario. Es importante incluirlo para proteger tu aplicación Laravel contra ataques CSRF (Cross-Site Request Forgery).

  4. <input type="hidden" name="anuncio_id" value="{{ $anuncio->id }}">: Aquí se agrega un campo oculto para enviar el ID del anuncio junto con los archivos cargados. El valor del campo se establece utilizando la sintaxis de Blade ”{{ $anuncio->id }}”, que probablemente obtenga el ID del anuncio de una variable en el controlador.

En resumen, este código crea un formulario de carga de archivos utilizando Dropzone en una vista de Laravel. Cuando los usuarios arrastran y sueltan archivos en el área de carga, se enviarán a la ruta “fotos.store” junto con el ID del anuncio correspondiente.

Carga de archivos

Section(‘CSS’)

@section('css')
    <!-- Estilos de la vista-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css"
        crossorigin="anonymous" />
@endsection

La sección @section('css') en una vista de Laravel define los estilos CSS específicos de esa vista. En el ejemplo proporcionado, se utiliza para cargar el archivo CSS de la biblioteca Dropzone desde un servicio de CDN, proporcionando estilos para el formulario de carga de archivos.

Sección js

@section('js')
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
        Dropzone.options.myDropzone = {
            paramName: 'imagen',
            maxFilesize: 2, <!-- Tamaño máximo del archivo en megabytes -->
            acceptedFiles: '.jpg, .jpeg, .png', <!-- Tipos de archivo aceptados -->
            dictDefaultMessage: 'Arrastra los archivos aquí para subirlos',
            maxFiles: 6, <!-- Límite máximo de archivos -->
            init: function() {
                this.on('error', function(file, errorMessage) {
                    // Manejar errores de carga de archivos aquí
                });
            },
        };
    </script>
@endsection

¿Qúe hace?

El código dentro de @section('js') define y configura la funcionalidad de Dropzone en la vista de Laravel. A continuación se describen las principales acciones realizadas:

  1. Se carga el archivo JavaScript de la biblioteca Dropzone desde el servicio de CDN especificado.

  2. Se define y configura el objeto Dropzone.options.myDropzone para personalizar el comportamiento de Dropzone. Algunas de las configuraciones incluyen:

    • paramName: Define el nombre del campo en el que se enviará el archivo al servidor.
    • maxFilesize: Establece el tamaño máximo permitido para cada archivo en megabytes.
    • acceptedFiles: Especifica los tipos de archivos aceptados.
    • dictDefaultMessage: Establece el mensaje predeterminado que se muestra en el área de carga.
    • maxFiles: Define el número máximo de archivos permitidos para cargar.
    • init: Define una función de inicialización que se ejecuta cuando se carga Dropzone. En este caso, se configura un evento de manejo de errores para gestionar los errores de carga de archivos.

  3. El código JavaScript se coloca dentro de la etiqueta <script> y se cierra con </script>.

En resumen, este código carga y configura la biblioteca Dropzone en la vista de Laravel, permitiendo la carga de archivos mediante la función de arrastrar y soltar, y estableciendo algunas configuraciones personalizadas, como el tamaño máximo de archivo, los tipos de archivo aceptados y el manejo de errores de carga.

← Volver al Blog