dropzone.js - example - Agregar un archivo existente a Dropzone mediante programación

dropzone laravel

Question

Estoy tratando de agregar una imagen existente a mi Dropzone programáticamente, usando las preguntas frecuentes de dropzone.js como guía:

// Add the existing image if it''s there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( ''[name="on_load_header_image"]'' ).val();
var on_load_header_path = $( ''[name="on_load_header_image_path"]'' ).val();
if ( on_load_header ) {
// Hardcoded size value is just for testing, see my second question below.
var on_load_header_data = { name: on_load_header, size: 12345 };
// Call the default addedfile event handler
headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );
// And optionally show the thumbnail of the file:
headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);
}

Mi primer problema es que esto simplemente no funciona. El evento de archivo agregado no se dispara (o al menos el controlador de headerDropzone en headerDropzone nunca se dispara), lo mismo ocurre con la miniatura.

Mi segundo problema / pregunta es: ¿tengo que proporcionar el tamaño del archivo? Podría hacerlo desde el servidor, pero preferiría no hacerlo si realmente no lo necesito.

Answer 1

Esto ahora es respondido en FAQ oficial

// 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");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);
// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);
// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

Answer 2

La última Dropzone es la falta de ejemplos y la documentación no es clara o está incompleta. Puede usar lo siguiente para agregar imágenes existentes a Dropzone.

for (var i = 0; i < imagesList.length; i++) {
let name = imagesList[i];
name = name.substring(name.lastIndexOf(''/'') + 1);
fetch(imagesList[i])
.then(res => res.blob())
.then(blob => {
let file = new File([blob], name, blob);
myDropzone1.addFile(file);
});
}

imagesList es una lista de imágenes que desea agregar a Dropzone.

Sin embargo, aún estoy enfrentando un problema: las imágenes no se agregan ni se muestran en el orden / secuencia como en imagesList. Aparecen más bien al azar. ¿Hay alguna forma de hacer que las imágenes se muestren en el orden / secuencia como en imagesList?

Answer 3

Las preguntas frecuentes de Dropzone omiten las configuraciones importantes requeridas para precargar correctamente una zona de descarga con uno o más archivos existentes.

Mi método init para mi dropzone:

Dropzone.options.MyDropZoneID = {
...
init: function () {
var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
this.emit("addedfile", mockFile);
this.createThumbnailFromUrl(mockFile, fileUrl);
this.emit("success", mockFile);
this.emit("complete", mockFile);
this.files.push(mockFile);
...

No sé si lo anterior es una implementación perfecta, pero está funcionando correctamente con la configuración de maxFiles. Lo cual es muy importante si no desea un comportamiento defectuoso (como el mensaje predeterminado que se muestra cuando no debería o los archivos adicionales que se cargan). Definitivamente, debe establecer la propiedad aceptada en verdadero y agregar el archivo a la propiedad de archivos. Lo único que creo que no es necesario es emitir el éxito. No he jugado con eso lo suficiente como para saberlo con seguridad.

Nota: usé el siguiente paquete de NuGet:

• Creado por: Matias Meno
• Id: dropzone
• Versión: 4.2.0

Answer 4

Muchas de estas respuestas son bastante anticuadas, esto me está funcionando en la última versión de Dropzone JS en el momento de escribir (tome nota de los comentarios incluidos):

init: function() {
var dzObj = this;
// In my template I looped through existing files from the database and created:
// <div class="existing-image" data-url="/path/to/file.jpg"></div>
$(''.existing-image'').each(function() {
// I didn''t have this data - works fine without
var mockFile = { name: '''', size: '''', dataURL: $(this).data(''url'') };
// Call the default addedfile event handler
dzObj.emit("addedfile", mockFile);
// The Dropzone JS FAQ incorrectly references "file" here instead of mockFile".
// The other parameters are outdated, dataURL goes in the object above,
// and you need to pass through other parameters.
// It DOES NOT WORK without the thumbnail event being triggered.
dzObj.createThumbnailFromUrl(mockFile, dzObj.options.thumbnailWidth, dzObj.options.thumbnailHeight, dzObj.options.thumbnailMethod, true, function (dataUrl) {
dzObj.emit("thumbnail", mockFile, dataUrl);
});
// Make sure that there is no progress bar, etc...
dzObj.emit("complete", mockFile);
dzObj.options.maxFiles = dzObj.options.maxFiles - 1;
});
}

Answer 5

Originalmente estaba haciendo algo en este sentido para cargar mediante programación un archivo preexistente en Dropzone:

headerDropzone.emit("addedfile", imageFile);
headerDropzone.emit("thumbnail", imageFile, imageUrl);
headerDropzone.files.push(file);

Sin embargo, al hacer referencia a este problema de Dropzone Github , encontré una manera más fácil de subir directamente:

headerDropzone.uploadFiles([imageFile])

Desafortunadamente, no hay referencias a este método uploadFiles en la documentación de Dropzone , así que pensé que compartiría algunos conocimientos con todos los usuarios de Dropzone.

Espero que esto ayude a alguien

Answer 6

Si necesita agregar varios archivos existentes en Dropzone, declare sus archivos existentes como una matriz y luego agréguelos a Dropzon programáticamente dentro de un bucle, de manera que ...

 Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: "/file/post",
maxFileSize: 50,
acceptedFiles: ".pdf",
addRemoveLinks: true,
//more dropzone options here
});
//Add existing files into dropzone
var existingFiles = [
{ name: "Filename 1.pdf", size: 12345678 },
{ name: "Filename 2.pdf", size: 12345678 },
{ name: "Filename 3.pdf", size: 12345678 },
{ name: "Filename 4.pdf", size: 12345678 },
{ name: "Filename 5.pdf", size: 12345678 }
];
for (i = 0; i < existingFiles.length; i++) {
myDropzone.emit("addedfile", existingFiles[i]);
//myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
myDropzone.emit("complete", existingFiles[i]);
}

Answer 7

Tuve el mismo problema y encontré el método handleFiles(files) .

Así que si tienes inputTypeFileRef , puedes

// inputTypeFiles.files is an object of type FileList
var fileArray = Object.values(inputTypeFiles.files || {});
myDropZone.handleFiles(fileArray);

Esto también activará todos los eventos de Dropzone y pasará los datos de los archivos que normalmente arrastraría un archivo: progreso, tamaño del archivo, etc.

Espero que haya ayudado.

Answer 8

headerDropzone.options.addedfile si las funciones headerDropzone.options.addedfile y headerDropzone.options.thumbnail están realmente definidas. Debería funcionar como lo hiciste, pero sin más información es difícil saber qué es lo que está mal.

Acerca del tamaño de archivo: No, no es necesario proporcionar el tamaño de archivo exacto. Es solo que Dropzone muestra automáticamente el tamaño del archivo. Si no le importa si se muestra un tamaño de archivo falso, puede proporcionar un número aleatorio o 0 . De lo contrario, es posible que desee ocultar el tamaño del archivo con CSS o con JS después de agregarlo. (El elemento en cuestión tiene la clase dz-size .

La versión de JavaScript se vería así:

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);