Dropzone file upload problem

[mic_y]

Ok, so I have a situation as follows: I have a page which has a textbox input (file description) and a dropzone component for uploading a file. This dropzone is configured to only accept a single file, and hits a controller method which stores the file on disc and creates an entry in the DB for this file.

The application needs to accept multiple files, and to achieve this I call another function in the on("success") method of the first dropzone to add another textbox+dropzone combo to the DOM. This dropzone obviously needs to be configured, which is done using the following line of code:

Dropzone.options.propertyFile = {...}
propertyFile is the camelized name of the div that contains the dropzone being configured.

So the first dropzone div ID is propertyFile1. To create the next one, I pass an incremented index value to the CreateDropzone method.

CreateDropzone(2)

Will create a Div with the ID of propertyFile2, etc.

How do I now configure the new dropzone in the CreateDropzone function since I do not know what it's name will be at runtime?

The code for CreateDropzone is as follows:

var CreateDropzone = function (n) {
var newPropertyFile = "<div class='col-sm-4'><div class='form-group'><label for='propertyFile" + n + "Desc'>File Description</label><input type='text' id='propertyFile" + n + "Desc' /><div class='dropzone' id='propertyFile" + n + "'></div></div></div>";
$('#propertyFiles').append(newPropertyFile);

Dropzone.options.propertyFile = {
    url: "/admin/PropertyFile/UploadPropertyFile",
    acceptedFiles: "application/pdf",
    uploadMultiple: false,
    addRemoveLinks: true,
    maxFiles: 1,
    init: function () {
        ...
    }
}

How do I reference the specific Dropzone I just created in the 4th line of code since it could be called propertyFile12 (after 11 files have been uploaded).

 

[Darko]

Give propertyFile an Id property which correlates with the incremented index value. Then just reference the dropzone that matches the index.

 

[rward]

don't forget that if you're using jQeury you need to use .on:

$(document).on('click', '#new_div', function(){
alert("This function is bound to all #new_div's click events, even if they are added to the DOM later!")
});