title: Dropzone add id on init function and sort
body: <p>I need to get id of my existing images into dropzone preview and ability of sending sort order to backend</p>
  <h3>What I have</h3>
  <ol>
  <li>get existing images</li>
  <li>sort images</li>
  </ol>
  <h3>What I need</h3>
  <ol>
  <li>Add images IDs to preview</li>
  <li>send sort order to back-end</li>
  </ol>
  <h3>Code</h3>
  <blockquote>
  <p>Each part of the code is commented for better understanding</p>
  </blockquote>
  <pre><code>Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone(&quot;#my-awesome-dropzone&quot;, {
      headers: {
        &quot;X-CSRF-TOKEN&quot;: $(&quot;meta[name='csrf-token']&quot;).attr(&quot;content&quot;)
      },
      acceptedFiles: &quot;.jpeg,.jpg,.png,.gif&quot;,
      dictDefaultMessage: &quot;Drag an image here to upload, or click to select one&quot;,
      maxFiles: 15, // Maximum Number of Files
      maxFilesize: 8, // MB
      addRemoveLinks: true,
      url: '{{ url('admin/dropzoneStore') }}/'+encodeURI('{{$product-&gt;id}}'),
      dictRemoveFile: 'Remove',
      dictFileTooBig: 'Image is bigger than 8MB',
  
      // get uploaded images in dropzone box
      init: function() {
        myDropzone = this;
        // get current images
        const images = @json($images);
        $.each(images, function(index, value) {
          var mockFile = {name: value.name, size: value.size, id: value.id };
          myDropzone.options.addedfile.call(myDropzone, mockFile);
          myDropzone.options.thumbnail.call(myDropzone, mockFile, &quot;/images/&quot;+value.name);
          myDropzone.options.complete.call(myDropzone, mockFile);
          myDropzone.options.success.call(myDropzone, mockFile);
        });
      }
    });
    // remove files from both view and database
    myDropzone.on(&quot;removedfile&quot;, function(file,response) {
        $.ajax({
            url: '{{ url('admin/destroyOnEdit') }}/'+encodeURI(file.name),
            type: 'DELETE',
            dataType: &quot;JSON&quot;,
            data: {
                &quot;name&quot;: file.name,
                &quot;_method&quot;: 'DELETE',
                &quot;_token&quot;: &quot;{{ csrf_token() }}&quot;,
            },
            success:function(data) {
              myDropzone.removeFile(file);
            }
        });
    });
    // sort images in preview (need to send this sort to back-end and update images &quot;sort&quot; column value)
    $(function() {
      $(&quot;.dropzone&quot;).sortable({
        items: '.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '.dropzone',
        distance: 20,
        tolerance: 'pointer',
        stop: function(event, ui) {
          var cloned = $('div#botofform').clone()
          $('#botofform').html(&quot;&quot;)
          $('.dropzone .dz-complete').each(function() {
            var data_id = $(this).data('id')
            console.log('event', event)
            console.log('ui', ui)
            console.log('data_id', data_id)
            $(cloned).find(&quot;input[data-id=&quot; + data_id + &quot;]&quot;).clone().appendTo($('#botofform'))
          });
        }
      });
    });
  </code></pre>
  <p><strong>Any idea?</strong></p>