CODEWITHSUNDEEP
jquerydropzone.js
Willy
Willy

Reputation: 1729

Global option for multiple dropzone in a single page

I have multiple forms and there is a dropzone in each form. I have successfully initiate the dropzones based on this link.

var myDropzoneTheFirst = new Dropzone(
    '#form1',
    {
        url : "upload1",
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop files or click here to upload',
        ...
    }
);

var myDropzoneTheSecond = new Dropzone(
    '#form2',
    {
        url : "upload'",
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop files or click here to upload',
        ...
    }
);

The option for each dropzone is almost same, except the url. So, how to centralize the option, so that I don't have to write the same configuration for other dropzone?

Upvotes: 5

Views: 5018

Answers (3)

Imam Nur
Imam Nur

Reputation: 61

So I use the same code, but when I add sending parameter and new fields it doesnt work. 

$(this).on("sending", function(a, b, c) {
  a.token = Math.random();
  c.append("token", a.token);
});

token is the new fields

Upvotes: 0

amlette
amlette

Reputation: 69

For a global impact, you can also overwrite dropzone's default config like this :

Dropzone.prototype.defaultOptions.addRemoveLinks = true;
Dropzone.prototype.defaultOptions.dictDefaultMessage = 'Drop files or click here to upload';
Dropzone.prototype.defaultOptions.paramName= 'postedFile';

And then, use the @wallek876 solution.

Upvotes: 4

wallek876
wallek876

Reputation: 3259

One thing it occurs to is that you could save the urls in an array, and then use this in a loop to set the url for each dropzone, here an example using dropzone's jQuery plugin:

Dropzone.autoDiscover = false;

var urls = ['url1', 'url2'];

$('.dropzone').each(function(index){
    $(this).dropzone({
        url: urls[index],
        paramName: 'postedFile',
        addRemoveLinks: true,
        dictDefaultMessage: 'Drop files or click here to upload',
        // ...
    })
});

Upvotes: 2

Related Questions