asp.net mvc - Using Dropzone.js in MVC Editor template -

i facing issues in using dropzone.js in mvc 5 editor templates. have partial view complete form, big, , in partial view call editor template, using dropzone.js. on form submit (implemented using custom button , jquery.form.js), model posted , 1 of property of model files.

editor template code:

<div class="col-md-7 col-lg-7 col-sm-6 col-xs-12">                 <div class="dropzone" id="filesdropzone">                     @html.textboxfor(model => model.attachmentfiles, new { type = "file", multiple = "true" })                     @html.validationmessagefor(model => model.attachmentfiles)                 </div>             </div> 

js code:

dropzone.options.filesdropzone =          {             url: '@viewbag.actionurl',             autodiscover: false,             autoprocessqueue: false,             paramname: "attachmentfiles",             uploadmultiple: true         }; 

now 2 issues facing are:

1. this code not work in chrome (i not able drop files in dropzone) while works in ie10. have tried using document.ready or using new dropzone same result.
2. on click of save button, action called contains complete model when use dropzone, have write processqueue on click of button , action called twice. 1 attachments , no other data , once data , not attachments. want is, called once form data including attachments.

any appreciated. open using other better library or writing custom code if way.

thanks.

you have prevent form submitted, load files , submit it. reason why form submitted twice because function: processqueue() of dropzone submit form... have submit either using processqueue() or form.submit (in case there no attachments)

$("button[type=submit]").on("click", function (e) {     // make sure form isn't being sent.      var form = $(this).closest('form');     if (form.valid() == true) {         if (mydropzone.getqueuedfiles().length > 0) {              (instance in ckeditor.instances) {                 ckeditor.instances[instance].updateelement();             }              e.preventdefault();             e.stoppropagation();             mydropzone.processqueue();         } else {             form.submit();             //mydropzone.uploadfiles([]); //send empty         }     } });