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.

Answer 1

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
    });

});