we're trying set form submit file upload , details , works great in modern browsers, unfortunately ie9 fallback not passing through of dropzone validation. i'm not entirely sure if functionality meant fallback , should pointing correctly it's allowing pass through on submit.
dropzone js
function fallback() { $(".dz-message").text('your browser not support drag n drop uploaded. please use file upload field below. on submitting, please patient while upload file, can take few minutes.'); } //dropzone config dropzone.options.wadainsertform = { paramname: "reguploadloc", uploadmultiple: false, autoprocessqueue: false, maxfiles: 1, maxfilesize: 2.2, // mb previewscontainer: '.dropzoneprev', clickable:'#dropzonearea', acceptedfiles: "application/zip,application/x-compressed,application/x-zip-compressed,application/pdf,image/jpeg,image/pjpeg", addremovelinks: true, dictdefaultmessage: "drag'n'drop files here or click upload supporting documents", dictfiletoobig: "this file big ({{filesize}}). file should 2mb or less.", forcefallback: true, fallback: function() { console.log("fallback engaged"); fallback(); }, // end of fallback init: function() { console.log("init engaged"); var mydropzone = this; this.element.queryselector("button[id=cmdsubmit]").addeventlistener("click",function(e) { $("button#cmdsubmit").button('submitting'); e.preventdefault(); e.stoppropagation(); mydropzone.processqueue(); }); this.on('complete', function () { if (this.getuploadingfiles().length === 0 && this.getqueuedfiles().length === 0 && validateform() === true) { self.location="place.asp"; } if (validateform() === true) { var button = $("button#cmdsubmit"); } if (button.text() === "submit") { button.text("submitting"); } else { button.text("submit"); } }); } //end of init };//end dropzone config html
<div class="form-group"> <label for="reguploadloc">supporting documents<span class="col-orange">*</span></label> <p class="help-block">please upload supporting documents may relevant submission. supporting documents must uploaded in 1 zipped file<br/>(i.e. .zip file, , no larger in file size 2mb)</p> <div id="dropzonearea"> <div class="dz-default dz-message"><span>drag'n'drop files here or click upload supporting documents</span></div> <div class="dropzoneprev"></div> <div class="fallback"> <input type="file" id="reguploadloc" name="reguploadloc"> </div> </div>
this intended. dropzonejs
browser support
chrome 7+
firefox 4+
ie 10+
opera 12+ (version 12 macos disabled because api buggy)
safari 6+
for other browsers, dropzone provides oldschool file input fallback.
there no workaround drag’n’drop in older browsers – isn’t supported. same goes image previews, etc… using dropzone, users using old browser able upload files. won’t , feel great. hey, that’s fault.
the old school file input has no validation , script dropzone not trigger because isn't using functions ajax submits or anything. literally submitting form. need have checks on server side security.
Comments
Post a Comment