Dropzone Add Id On Init Function And Sort

I need to get id of my existing images into dropzone preview and ability of sending sort order to backend What I have get existing images sort images What I need Add images IDs

Solution 1:

As your id is unique you can use this id to identify each images in your dropzone .So, inside init function whenever you append new images you can add data-id to each preview div using attr('data-id', value.id) and append input-box inside your bottom div .

Demo Code :

Dropzone.autoDiscover = false;
var myDropzone = newDropzone("#my-awesome-dropzone", {
  headers: {
    "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
  },
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
  dictDefaultMessage: "Drag an image here to upload, or click to select one",
  maxFiles: 15, // Maximum Number of FilesmaxFilesize: 8, // MBaddRemoveLinks: true,
  //url: '{{ url('admin/dropzoneStore') }}/'+encodeURI('{{$product->id}}'),dictRemoveFile: 'Remove',
  dictFileTooBig: 'Image is bigger than 8MB',

  // get uploaded images in dropzone boxinit: function() {
    myDropzone = this;
    // get current images// const images = @json($images);var images = [{
      id: 103,
      img_alt: "svsss",
      name: "IMG_20201007_110637.jpg",
      sort: 0
    }, {
      id: 104,
      img_alt: "svsss1",
      name: "IMG_20201019_131338.jpg",
      sort: 1
    }, {
      id: 105,
      img_alt: "svsss3",
      name: "IMG_2020101_131339.jpg",
      sort: 2
    }, {
      id: 106,
      img_alt: "svsss4",
      name: "IMG_2020101_131340.jpg",
      sort: 3
    }]
    $.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, "/images/" + value.name);
      myDropzone.options.complete.call(myDropzone, mockFile);
      myDropzone.options.success.call(myDropzone, mockFile);
      $(mockFile.previewElement).attr('data-id', value.id); //add data-id to preview div
      $('#botofform').append('<input type="text" class="cimages" name="cimages[]" data-id = "' + value.id + '" value="' + value.name + '" sort="' + value.sort + '">'); //append image value(name) and data-id(id) and sort(value as well)

    });
  }
});

$(function() {
  $(".dropzone").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("")
      console.clear()
      $('.dropzone .dz-complete').each(function(i) {
        var data_id = $(this).data('id')
        console.log('data_id-- ' + data_id + " || sort --" + i)
        //find input change attr and then clone same...
        $(cloned).find("input[data-id=" + data_id + "]").attr("sort", i).clone().appendTo($('#botofform'))
      });
    }
  });
});

<linkrel="stylesheet"href=" http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><divclass="dropzone"id="my-awesome-dropzone"action="#"><divclass="fallback"><inputname="cimages[]"type="file"multiple /></div><divclass="clearfix"></div></div><divid="botofform"></div>