MisterPi MisterPi - 3 months ago 16
HTML Question

How to use dropzone JS for some button on the page?

I have few buttons on the page. I need to load file when I click on each of buttons.

Every button has unique

attribute, which I must to pass in request AJAX, when I click it.

How can I do this using Dropzone plugin?


As requested, here is an example of how you can create a button that will upload a file and a data attribute with Bootstrap.

<button class='btn btn-default chooser' data-id='hello'>Choose a file</button>

The JS requires this helper library I wrote for this exact purpose: fileUpload.js

$(".chooser").each(function() {
    var ele = this;
        change: function() {
            // Get the files from the input
            var files = $(ele).fileUpload("getFiles");
            var formData = new FormData();
            for (var i = files.length; i--;)
                formData.append('myFiles[]', self.files[i], self.files[i].name);
            // Get the data attribute from the button
            formData.append('data-id', $(ele).data('id'));
                url: "http://mywebsite.com/uploads",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
            }).always(function(xhr) {
                // all done. do something with the response here

There are other options, you can restrict it to only accept certain file types or multiple files, etc. See the link above for more info.