Janvier M Janvier M - 4 months ago 54
jQuery Question

Dropzone - Add extra values (hidden fields) to images

I am integrating DropZones.js with Laravel 5.2. So far so good. The only thing is that on upload, I would like to add extra hidden fields to the image container.

<div class="dz-preview ">
<img src="" />
</div>

<div class="dz-preview ">
<img src="" />
</div>
<div class="dz-preview ">
<img src="" />
</div>


And I would like:

<div class="dz-preview ">
<img src="" />
<input type="hidden" name="imagehidden1" . . . >
</div>

<div class="dz-preview ">
<img src="" />
<input type="hidden" name="imagehidden2" . . . >
</div>

<div class="dz-preview ">
<img src="" />
<input type="hidden" name="imagehidden3" . . . >
</div>


In other words, I want to add 3 hidden fields if I add 3 images, 5 if I add 5 and so forth, each with its own unique name.

Anyone?

Answer

I did some digging and found that that one of the templates previewTemplate. I replace that value with my updated HTML version with the hidden inputs :) like so:

Dropzone.options.falcondropzone = {
    previewsContainer     : ".dropzone-previews",
    thumbnailWidth        : "400",
    thumbnailHeight       : "200",
    maxFiles              : 10,
    maxFilesize           : 5000,
    clickable             : '.roundedicon',
    previewTemplate       : '<input type="hidden" name="uploadables[]" class="uploadedimg" /> . . . . . .  } 

That worked for me. I hope it helps someone some day