Add an hidden input with image URL inside thumbnail bloc in dropzone

Question

How can I insert a hidden input field that will contain the URL of each image uploaded with the Dropzone library inside <div class="dz-details">, for example.

var myDropzone = new Dropzone("#form_snippet_image", {
  url: _actionToDropZone,
  dictInvalidFileType: 'Ce fichier n\'est pas conforme. Il n\'est donc pas téléchargeable.',
  previewTemplate: document.querySelector('#thumbnail').innerHTML,
  acceptedFiles: ".png,.jpg,.gif,.jpeg",
  dictDefaultMessage: '<i class="msg-default-dropzone">Cliquer ou Déposer vos fichiers à télécharger ici.</i>',
  removedfile: function(file) {
    var name = file.upload.filename;
    $.ajax({
      // ... AJAX 
    },

Answer 1

Hmm the docs for Dropzone.js are not really good, but it seems like you are looking for the chunksUploaded option

https://www.dropzonejs.com/#config-chunksUploaded

var myDropzone = new Dropzone("#form_snippet_image", {
  ...
  chunksUploaded: function(file, done) {
    //add your input here

    //not sure if it will work
    let input = document.createElement("input");
    input.hidden = true;
    input.value = file.url;
    // cannot find informations about the file object
    // in the dropzone.js doc ...
    document.querySelector(".dz-details").appendChild(input);

    done();
  }
}