javascript - Add existing image files in Dropzone -

i using dropzonejs add image upload functionality in form, have various other fields in form have set autoprocessqueue false , processing on click on submit button of form 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 , allows me process images sent when form submitted. however, want able see images uploaded user when edits form again. went through following post dropzone wiki. https://github.com/enyo/dropzone/wiki/faq#how-to-show-files-already-stored-on-server

which populates dropzone-preview area existing images not send existing images form submit time. guess because theses images not added in queue if it's how can update on server side, in case existing image removed user?

also, better approach, add added images in queue again or send information of removed file?

i spent bit of time trying add images again, after battling while ended sending information deleted images server.

when populating dropzone existing images attach image's url mockfile object. in removedfile event add hidden input form if file being removed prepopulated image (determined testing whether file passed event has url property). have included relevant code below:

dropzone.options.imagedropzone = {     paramname: 'newimages',     autoprocessqueue: false,     uploadmultiple: true,     paralleluploads: 100,     maxfiles: 100,     init: function () {         var mydropzone = this;          //populate existing thumbnails         if (thumbnailurls) {             (var = 0; < thumbnailurls.length; i++) {                 var mockfile = {                      name: "myimage.jpg",                      size: 12345,                      type: 'image/jpeg',                      status: dropzone.added,                      url: thumbnailurls[i]                  };                  // call default addedfile event handler                 mydropzone.emit("addedfile", mockfile);                  // , optionally show thumbnail of file:                 mydropzone.emit("thumbnail", mockfile, thumbnailurls[i]);                  mydropzone.files.push(mockfile);             }         }          this.on("removedfile", function (file) {             // files have been programmatically added should             // have 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 remove image         }          foreach (var image in viewmodel.newimages)         {             // code add image         }     } } 

i hope helps.