dropzone.js - how can I post dynamic div id

Question

I try to upload files with dropzone.js. My problem is that I have four dropzone upload containers on one page for different images. How can I post the selected div to the post event?

<div class='product_thumbs'>
  <form name="product_image_1" action="ajax/upload.php" class="dropzone">
    <div class="product_image image_1" id="image_1">
      <div class="fallback">
        <i class="fa fa-upload"></i>
        <input id="file_1" type="file" multiple />
      </div>
    </div>
    <div class="product_image image_2" id="image_2">
      <div class="fallback">
        <i class="fa fa-upload"></i>
        <input id="file_2" type="file" multiple />
      </div>
    </div>
    <div class="product_image image_3" id="image_3">
      <div class="fallback">
        <i class="fa fa-upload"></i>
        <input id="file_3" type="file" multiple />
      </div>
    </div>
    <div class="product_image image_4" id="image_4">
      <div class="fallback">
        <i class="fa fa-upload"></i>
        <input id="file_4" type="file" multiple />
      </div>
    </div>
  </form>
</div>

$(document).ready(function() {
  $(".image_1, .image_2, .image_3, .image_4").dropzone({
    url: "ajax/upload.php?product_id=" + $("#product_id").val() + "&image_number=" + $(this.element).data("id"), // Here I´ll post the id
      thumbnailWidth: 100,
      thumbnailHeight: 120,
      addRemoveLinks: false,
      previewTemplate: ""+
        "<div class=\"dz-preview dz-file-preview\">"+
        "<div class=\"dz-details\">"+
        //"<div class=\"dz-filename\"><span data-dz-name></span></div>"+
        //"<div class=\"dz-size\" data-dz-size></div>"+
        "<img data-dz-thumbnail />"+
        "</div>"+
        "<div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>"+
        "<div class=\"dz-error-message\"><span data-dz-errormessage></span></div>"+
        "</div>"
    });
});

How can I edit the URL after adding an image? I will post also the class or id of the selected file container...

Answer 1

Try This:

$(this).attr("id")

to get the id of current div

Answer 2

I'm not sure what you're trying to achieve.

If you wish to simply post all of the input files give them all the same name eg name="file[]" the [] mean it's an array.