[Fixed] multiple dropzone file uploader on same page not working

Hi,

I was having the same issue while implementing the multiple dropzones on the same page. So after pulling my hairs for a couple of hours, I found the solution for this issue.

You have to add this line after the dropzone js file

 <script src="~/lib/dropzone/dist/dropzone.js">
     <script type="text/javascript">
        // Immediately after the js include
        Dropzone.autoDiscover = false;     
</script>

Here is my dropzone code

 var myDropzoneProfile = new Dropzone(
        '#dpz-multiple-files',
        {
            url: "", // Set the url
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 1, // MB
            clickable: true,
            maxFiles: 8,
            acceptedFiles: 'image/*',            
            init: function () {
                this.on("processing", function (file) {
                });
                this.on("maxfilesexceeded",
                    function (file) {
                        this.removeAllFiles();
                        this.addFile(file);
                    });
                this.on("success",
                    function (file, responseText) {
                     // do something here
                    });
                this.on("error",
                    function (data, errorMessage, xhr) {
                        // do something here
                    });
            }
        });


var myDropzoneTreatmentCard = new Dropzone(
        '#dpz-single-file', {
            url: "", // Set the url
            maxFiles: 1,
            maxFilesize: 1, // MB
            acceptedFiles: 'image/*',           
            init: function () {
                this.on("processing", function (file) {
                });
                this.on("maxfilesexceeded", function (file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });
                this.on('complete',
                    function (file) {
                       // do something here
                    });
                this.on("success", function (file, responseText) {
                    // do something here
                });
                this.on("error", function (data, errorMessage, xhr) {
                    // do something here
                });
            }
        });

I hope it will work for you guys too.

+3

0