Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add existing image files in Dropzone

Tags:

I am using Dropzonejs to add image upload functionality in a Form, as I have various other fields in form so I have set autoProcessQueue to false and Processing it on click on Submit button of Form as shown below.

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();          });      }  } 

This works fine and allows me to process all images sent when form is submitted. However, I also want to be able to see images already uploaded by user when he edits the form again. So I went through following post from Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Which populates dropzone-preview area with existing images but it does not send existing images with form submit this time. I guess this is because theses images are not added in queue but If it's so then how can update on server side, In case an existing image is removed by user?

Also, what would be the better approach, add already added images in queue again or just send information of removed file?

like image 582
lalit Avatar asked Jun 27 '14 06:06

lalit


People also ask

How do I add an image to dropzone?

Show activity on this post. // 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");

How can I show you the files already stored on server using dropzone JS?

Set Dropzone autoDiscover to false and initialize dropzone on class="dropzone" . Send AJAX POST request from init function to get all the files list. On successfully callback loop on the response and assign { name: value.name, size: value. size } in mockFile .


1 Answers

I spent a bit of time trying to add images again, but after battling with it for a while I ended up just sending information about the deleted images back to the server.

When populating dropzone with existing images I attach the image's url to the mockFile object. In the removedfile event I add a hidden input to the form if the file that is being removed is a prepopulated image (determined by testing whether the file that is passed into the event has a url property). I have included the relevant code below:

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');             }         });     } }); 

Server code (asp mvc controller):

[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         }     } } 

I hope that helps.

like image 99
Teppic Avatar answered Sep 30 '22 07:09

Teppic