Upload multiple files in Struts2 with Dropzone.js

Problem When you use <input type=”file” name=”file” multiple /> the files will all be sent with name=”file”, eg: Content-Disposition: form-data; name=”file”; filename=”foo.jpg” Content-Type: image/jpeg ……….. . … ……. Content-Disposition: form-data; name=”file”; filename=”bar.jpg” Content-Type: image/jpeg …. . .. ……. and this is the right parameter Struts2 FileUpload Interceptor is expecting to receive, to work with a … Read more

how to upload and delete files from dropzone.js

For deleting thumbnails you have to enable addRemoveLinks: true, and to use “removedfile” option in dropzonejs removedfile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to. addRemoveLinks: true, removedfile: function(file) { var _ref; return (_ref = file.previewElement) != null … Read more

Dropzone Submit Button on Upload

You need to: Add a button: <button type=”submit” id=”button” class=”btn btn-primary”>Submit</button> Tell Dropzone not to automatically upload the file when you drop it, as it will by default. That’s done with the autoProcessQueue config option: autoProcessQueue: false Since Dropzone will now not auto-upload the files, you need to manually tell it to do that when … Read more

How to limit the number of dropzone.js files uploaded?

I achieved this a slightly different way. I just remove the old dropped file any time a new file is added. It acts as overwriting the file which was the user experience I was going for here. Dropzone.options.myAwesomeDropzone = { accept: function(file, done) { console.log(“uploaded”); done(); }, init: function() { this.on(“addedfile”, function() { if (this.files[1]!=null){ … Read more

Integrating Dropzone.js into existing HTML form with other fields

Here’s another way to do it: add a div in your form with a classname dropzone, and implement dropzone programmatically. HTML : <div id=”dZUpload” class=”dropzone”> <div class=”dz-default dz-message”></div> </div> JQuery: $(document).ready(function () { Dropzone.autoDiscover = false; $(“#dZUpload”).dropzone({ url: “hn_SimpeFileUploader.ashx”, addRemoveLinks: true, success: function (file, response) { var imgName = response; file.previewElement.classList.add(“dz-success”); console.log(“Successfully uploaded :” + … Read more