Multiple dropzone with single function

Question

I have a form with multiple Dropzones for image upload. Below is my code:

HTML

<form>
    <input type="text">
    <div>
        <div>
            <div class="dropzone dropzone-previews" id="test-image1"></div>
            <div class="dropzone dropzone-previews" id="test-image2"></div>
        </div>
        <div>
            <div class="dropzone dropzone-previews" id="test-image3"></div>
            <div class="dropzone dropzone-previews" id="test-image4"></div>
        </div>
    </div>
</form>

JavaScript:

$(function () {
    Dropzone.options.testImage1 = {
        url: "test1.php",
        maxFiles : 10,
        paramName: "file1", 
        maxFilesize: 2,
    }
    Dropzone.options.testImage2 = {
        url: "test2.php",
        maxFiles : 20,
        paramName: "file2", 
        maxFilesize: 10,
    }
    Dropzone.options.testImage3 = {
        url: "test3.php",
        maxFiles : 30,
        paramName: "file3", 
        maxFilesize: 20,
    }
    Dropzone.options.testImage4 = {
        url: "test4.php",
        maxFiles : 40,
        paramName: "file4", 
        maxFilesize: 5,
    }       
});

Now I have 4 different Dropzone functions for 4 divs. This is working properly.

Actually In my project there is a lot of use of Image Upload & I will be using Dropzone multiple times on different pages.

My question is -- can I write one Dropzone function & pass the parameter values like Id, maxFiles, paramName, maxFilesize & may be others, so that I do not have to write multiple Dropzone functions ?

Thanks in advance.

I am not sure if I understand your question, you can write a function that takes those arguments you want, but you will need to call that function 4 times anyway. — wallek876
@wallek876 - yes I know. I need to call that function 4 times. But in my dropzone function, there are lot of options, which I need to write again & again for every div id. I want to know how can I write a function for the same. — NitinS

wallek876 wallek876 · Accepted Answer · 2015-11-19T13:41:14

Well, I am not sure if this is what you are looking for but one thing it occurs to me is that you can use the divs ids to set the options, and then use that id in javascript to configure the dropzone element.

Here a generic example with the parameters you mention in your question using jQuery:

html:

<div class="dropzone" id="image-1-10-1"></div>
<div class="dropzone" id="image-2-20-2"></div>
<div class="dropzone" id="image-3-30-3"></div>
<div class="dropzone" id="image-4-40-4"></div>

js:

Dropzone.autoDiscover = false;

$('.dropzone').each(function(){
    var options = $(this).attr('id').split('-');
    var dropUrl = 'test' + options[1] + '.php';
    var dropMaxFiles = parseInt(options[2]);
    var dropParamName = 'file' + options[1];
    var dropMaxFileSize = parseInt(options[3]);

    $(this).dropzone({
        url: dropUrl,
        maxFiles: dropMaxFiles,
        paramName: dropParamName,
        maxFilesSize: dropMaxFileSize

        // Rest of the configuration equal to all dropzones
    });

});

Multiple dropzone with single function

1 Answers