MisterPi MisterPi - 24 days ago 5
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

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

How can I do this using Dropzone plugin?

Answer

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;
    $(ele).fileUpload({
        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'));
            $.ajax({
                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.

Comments