Header Ads Widget

Ticker

6/recent/ticker-posts

Laravel 8 Arrastra y suelta la interfaz de usuario de carga de archivos / imágenes usando Dropzone.js Ejemplo con barras de progreso y vistas previas de imágenes

 A lo largo de este tutorial, le mostraremos por ejemplo cómo usar Dropzone.jsen Laravel 8 para arrastrar, soltar y cargar archivos únicos o múltiples con barras de progreso y vistas previas de imágenes.

Dropzone.js es una biblioteca de JavaScript que proporciona una manera fácil de cargar y previsualizar imágenes con una barra de progreso agradable. Admite múltiples cargas de archivos y cargas de arrastrar y soltar. Proporciona funciones como vistas previas de imágenes, barras de progreso de carga, varios archivos y cargas sincrónicas.

Veamos cómo usar Dropzone.jspaso a paso con Laravel 8 para implementar la carga de múltiples archivos e imágenes con barras de progreso y vistas previas de imágenes.

Paso 1: inicializar una aplicación de Laravel 8

Comencemos creando una nueva aplicación Laravel 8.

Dirígete a una nueva interfaz de línea de comandos y ejecuta el siguiente comando:

$ composer create-project --prefer-dist laravel/laravel laravel8uploadapp

Paso 2: configurar una base de datos MySQL

Después de crear nuestra aplicación Laravel 8 usando Composer, procedamos a configurar una base de datos.

Abra el .envarchivo y agregue las credenciales para acceder a su base de datos:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=mydb 
DB_USERNAME=root
DB_PASSWORD=root

En mi caso, ya he creado una base de datos nombrada mydben el servidor MySQL, también asegúrese de cambiar el nombre de usuario y la contraseña a los configurados para su instancia de MySQL,

Paso 3: agregar un controlador Laravel 8

A continuación, después de configurar la base de datos MySQL en su aplicación Laravel 8, agreguemos un controlador para cargar archivos a nuestro servidor.

Regrese a su terminal y ejecute el siguiente comando:

$ php artisan make:controller UploadController

Abra el app/Http/Controllers/UploadController.phparchivo y actualícelo de la siguiente manera:

<?php 

namespace  App\Http\Controllers;  
use  Illuminate\Http\Request;  

class  UploadController  extends  Controller {  

/** 
 * Generate Upload View 
 * 
 * @return void 

 */  

  public  function upload()  
  {  
      return view('upload-view');  
  }  

/** 
 * File Upload Method 
 * 
 * @return void 
 */  

  public  function uploadFile(Request $request)  
  {  
     $file = $request->file('file');  
     $fileName = time().'.'.$file->extension(); 
     $file->move(public_path('file'),$fileName);  

  return response()->json(['success'=>$fileName]);  

  }  

}

Paso 4: agregar una ruta de Laravel 8

A continuación, procedamos a agregar una ruta para cargar archivos a nuestro servidor.

Dirígete al routes/web.phparchivo y agrega la siguiente ruta:

use App\Http\Controllers\UploadController;

Route::get('ui', [ UploadController::class, 'upload' ]);
Route::post('upload', [ UploadController::class, 'uploadFile' ])->name('uploadFile');

Paso 5: agregar una vista de hoja

Finalmente, agreguemos una plantilla de vista usando Blade. Usaremos Dropzone.js para cargar archivos.

La forma típica de usar dropzone es creando un elemento de formulario con la clase dropzone:

Crea el upload-view.blade.phparchivo dentro de la resources/views/carpeta.

A continuación, abra resources/views/upload-view.blade.phpy actualícelo de la siguiente manera:

<!DOCTYPE html>  

<html>  
<head>  
  <title>Laravel 8 Drag And Drop File Upload </title>  

  <link  href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"  rel="stylesheet">  

  <script  src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script>
var dropzone = new Dropzone('#demo-upload', {
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  parallelUploads: 2,
  thumbnailHeight: 120,
  thumbnailWidth: 120,
  maxFilesize: 3,
  filesizeBase: 1000,
  thumbnail: function(file, dataUrl) {
    if (file.previewElement) {
      file.previewElement.classList.remove("dz-file-preview");
      var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
      for (var i = 0; i < images.length; i++) {
        var thumbnailElement = images[i];
        thumbnailElement.alt = file.name;
        thumbnailElement.src = dataUrl;
      }
      setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
    }
  }

});


// Now fake the file upload, since GitHub does not handle file uploads
// and returns a 404

var minSteps = 6,
    maxSteps = 60,
    timeBetweenSteps = 100,
    bytesPerStep = 100000;

dropzone.uploadFiles = function(files) {
  var self = this;

  for (var i = 0; i < files.length; i++) {

    var file = files[i];
    totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));

    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(function(file, totalSteps, step) {
        return function() {
          file.upload = {
            progress: 100 * (step + 1) / totalSteps,
            total: file.size,
            bytesSent: (step + 1) * file.size / totalSteps
          };

          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
          if (file.upload.progress == 100) {
            file.status = Dropzone.SUCCESS;
            self.emit("success", file, 'success', null);
            self.emit("complete", file);
            self.processQueue();
            //document.getElementsByClassName("dz-success-mark").style.opacity = "1";
          }
        };
      }(file, totalSteps, step), duration);
    }
  }
}
</script>

<style  type="text/css">  
body {
    background: rgb(243, 244, 245);
    height: 100%;
    color: rgb(100, 108, 127);
    line-height: 1.4rem;
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

h1 { text-align: center; }

.dropzone {
    background: white;
    border-radius: 5px;
    border: 2px dashed rgb(0, 135, 247);
    border-image: none;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
</style>   
</head>  
<body>  

<h1>Laravel 8 DropzoneJS File Upload Demo</h1>
<section>
  <div id="dropzone">
    <form class="dropzone needsclick" id="demo-upload" action="" enctype="multipart/form-data">
    @csrf
      <div class="dz-message needsclick">    
        Drop files here or click to upload.<br>
        <span class="note needsclick">(This is just a demo dropzone. Selected 
        files are <strong>not</strong> actually uploaded.)</span>
      </div>
    </form>
  </div>
</section>  
</body>  
</html>

El código para implementar Dropzone.js se toma de este lápiz de código :

Ejemplo de carga de Laravel 8 Dropzone.js

Eso es. Dropzone encontrará todos los elementos del formulario con la clase dropzone, se adjuntará automáticamente a él y cargará los archivos colocados en él con el actionatributo especificado .

Hemos implementado nuestra carga de archivos Laravel 8 usando Dropzone.js para arrastrar, soltar y cargar imágenes o archivos únicos o múltiples con barras de progreso y vistas previas de imágenes.

Paso 6 - Ejecutando el servidor Laravel 8

Puede ejecutar su aplicación con el siguiente comando:

$ php artisan serve

Dirígete a tu navegador web y navega hasta la localhost:8000/uploaduidirección.

Conclusión

En este breve artículo, hemos visto cómo podemos crear una interfaz de usuario de carga de Laravel 8 Dropzone.jspara implementar una interfaz de usuario de arrastrar y soltar para cargar archivos e imágenes únicos o múltiples con barras de progreso y vistas previas de imágenes

Publicar un comentario

0 Comentarios