Agregue files de imágenes existentes en Dropzone

Estoy usando Dropzonejs para agregar funcionalidad de carga de imágenes en un Formulario, ya que tengo varios otros campos en el formulario, por lo que he configurado autoProcessQueue en false y autoProcessQueue onclick en el button Enviar del formulario, como se muestra a continuación.

 Dropzone.options.portfolioForm = { url: "/user/portfolio/save", previewsContainer: ".dropzone-previews", uploadMultiple: true, parallelUploads: 8, autoProcessQueue: false, autoDiscover: false, addRemoveLinks: true, maxFiles: 8, init: function() { var myDropzone = this; this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); } } 

Esto funciona bien y me permite procesar todas las imágenes enviadas cuando se envía el formulario. Sin embargo, también quiero poder ver las imágenes que ya cargó el usuario cuando edita el formulario nuevamente. Así que revisé la siguiente publicación de Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stonetworking-on-server

Que rellena el dropzone-preview zona dropzone-preview con imágenes existentes pero no envía imágenes existentes con el formulario submit esta vez. Supongo que esto se debe a que las imágenes de tesis no se agregan en la queue pero si es así, ¿cómo se puede actualizar en el lado del server, en caso de que el usuario elimine una image existente?

Además, ¿cuál sería el mejor enfoque, agregar imágenes ya agregadas en la queue nuevamente o simplemente enviar información del file eliminado?

Pasé un time tratando de agregar imágenes otra vez, pero después de luchar con él por un time terminé simplemente enviando información sobre las imágenes borradas al server.

Al rellenar dropzone con imágenes existentes, adjunto la url de la image al object mockFile. En el evento removedfile, agrego una input oculta al formulario si el file que se está eliminando es una image pre-poblada (determinada al probar si el file que se pasa al evento tiene una propiedad url). He incluido el código relevante a continuación:

 Dropzone.options.imageDropzone = { paramName: 'NewImages', autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 100, init: function () { var myDropzone = this; //Populate any existing thumbnails if (thumbnailUrls) { for (var i = 0; i < thumbnailUrls.length; i++) { var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg', status: Dropzone.ADDED, url: thumbnailUrls[i] }; // Call the default addedfile event handler myDropzone.emit("addedfile", mockFile); // And optionally show the thumbnail of the file: myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]); myDropzone.files.push(mockFile); } } this.on("removedfile", function (file) { // Only files that have been programmatically added should // have a url property. if (file.url && file.url.trim().length > 0) { $("<input type='hidden'>").attr({ id: 'DeletedImageUrls', name: 'DeletedImageUrls' }).val(file.url).appendTo('#image-form'); } }); } }); 

Código de server (controller asp mvc):

 [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit(ViewModel viewModel) { if (ModelState.IsValid) { foreach (var url in viewModel.DeletedImageUrls) { // Code to remove the image } foreach (var image in viewModel.NewImages) { // Code to add the image } } } 

Espero que eso ayude.

Para extender la respuesta de Teppic, descubrí que necesitaba emitir el evento completo para eliminar la barra de progreso en la vista previa.

 var file = { name: value.name, size: value.size, status: Dropzone.ADDED, accepted: true }; myDropzone.emit("addedfile", file); myDropzone.emit("thumbnail", file, value.path); myDropzone.emit("complete", file); myDropzone.files.push(file); 

Originalmente estaba haciendo esto para upload un file preexistente mediante progtwigción:

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

Sin embargo, al hacer reference a este Dropzone Github Issue encontré una forma más fácil de cargarlo directamente:

 myDropzone.uploadFiles([imageFile]) 

Lamentablemente, no hay references a este método uploadFiles en la documentation de Dropzone , así que pensé que compartiría algunos conocimientos con todos los usuarios de Dropzone.

Espero que esto ayude a alguien

Al hacer clic en cargar files, simplemente borre los files de dropzone. Todos los files se pueden borrar usando removeAllFiles () o un file específico también puede eliminar utilizando removeFile (fileName).