preview - files - upload image js

¿Cómo puedo cargar imágenes en dropzone.js?

Question

Tengo una instancia de dropzone.js en una página web con las siguientes opciones:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

Se crea una instancia mediante programación, ya que forma parte de una forma más grande. Lo tengo preparado para procesar la cola cuando se envía el formulario.

El objetivo es que mis usuarios puedan usar la zona de descarga para administrar imágenes de un elemento, por lo que cuando cargue mi vista ''editar / actualizar'' para un elemento, me gustaría cargar la zona de descarga con las imágenes que habían sido previamente cargado para ese artículo. ¿Hay una buena manera de implementar esto para que los elementos que ya están allí no se vuelvan a cargar cuando envían sus cambios a la lista de imágenes?

Answer 1

Dropzone es tan fuerte y asombroso que puedes hacer cualquier cosa al respecto.
Pasos a seguir ->

1) En primer lugar, tendrá que crear un script del lado del servidor que obtendrá todos los nombres de archivo y su tamaño y lo enviará como respuesta json.
Código PHP:

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj[''name''] = $file; //get the filename in array
        $obj[''size''] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header(''Content-Type: application/json'');
       echo json_encode($result); // now you have a json response which you can use in client side 

2) Ahora puede usar la respuesta para mostrar los archivos cargados. Escriba el siguiente código dentro de la función de inicio de Dropzone
Código Javascript:

  init: function() {

      var thisDropzone = this;

        $.getJSON(''get_item_images.php'', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Nota: no tome la ruta completa de la URL del archivo en el nombre del archivo, solo tome el nombre del archivo.
Esto funciona

Answer 2

La forma correcta de hacerlo es utilizar el método .emit proporcionado por en dropzone js para agregar un archivo y una miniatura para precargar imágenes desde el servidor. Ver código de ejemplo a continuación. Tomado de https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

El método .emit de Dropzone activará la función de inicio de sesión y si tiene una devolución de llamada de evento de archivo agregado escrita para ello. por ejemplo, estoy usando el botón agregar quitar evento agregado y también la funcionalidad adjunta de eliminar imagen.