Recours à Dropzonejs pour les images ajoutées

Question

J'ai une boîte dropzone et j'y ai implémenté le triable. Comme mon formulaire se soumet avec html et non ajax, j'ai dû ajouter des entrées cachées où je pousse mes images sélectionnées avec dropzonejs pour pouvoir les récupérer en back-end.

Jusqu'à présent, tout ce que j'ai expliqué ci-dessus fonctionne

Numéro

Comme je l'ai mentionné, j'ai implémenté une fonctionnalité de tri dans dropzonejs et il trie les images dans la zone de dépôt, mais pas dans mon entrée cachée ajoutée

Afin d'obtenir des images triées dans le back-end, je dois appliquer ce triable dans mon entrée ajoutée également.

Código

HTML

//Drop zone box
<div class="dropzone" id="my-awesome-dropzone" action="#">
  <div class="fallback">
     <input name="cimages[]" type="file" multiple />
  </div>
  <div class="clearfix"></div>
</div>
// append hidden input include selected images for back-end use
<div id="botofform"></div>

Script

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

  // append hidden input and add selected images
  accept: function(file) {
      let fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onloadend = function() {
          let content = fileReader.result;
          $('#botofform').append('<input type="hidden" class="cimages" name="cimages[]" value="'+ content +'">');
          file.previewElement.classList.add("dz-success");
      }
      file.previewElement.classList.add("dz-complete");
  }
});
// reorder images in dropzone box (need to get this results into "$('#botofform').append" above)
$(function(){
  $(".dropzone").sortable({
    items:'.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
  });
});

Pregunta

1. Comment puis-je appliquer des résultats triables dans mon entrée ajoutée ?
2. Comment puis-je réduire $('#botofform') (entrées) lorsqu'une image est supprimée par dropzonejs ?

Answer 1

Vous pouvez utiliser données-attribut pour votre div où l'image est ajoutée et input Ainsi, à chaque fois qu'un nouveau fichier est téléchargé, vous pouvez utiliser le champ setAttribute("data-id", count) aquí compter peut être un nombre aléatoire quelconque, mais assurez-vous que cette valeur est la même pour les deux. input y div car cela nous aidera à supprimer et à trier les entrées.

Maintenant, pour trier les entrées, vous pouvez utiliser événement d'arrêt Cette fonction sera appelée lorsque le tri sera arrêté. A l'intérieur de cette fonction, vous pouvez faire une boucle à travers dropzone et ensuite l'attribut get que nous avons ajouté plus tôt en utilisant cet attribut nous pouvons trouver l'entrée et l'ajouter à botofform div.

Enfin, pour supprimer des fichiers vous pouvez utiliser supprimer des fichiers qui sera appelé chaque fois que remove le lien est cliqué, donc ici vous avez simplement besoin d'obtenir ce data-id qui est ajouté au div, puis utiliser cet attribut pour supprimer l'entrée également.

Code démo :

var count;
var random;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
  headers: {
    "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
  },
  autoProcessQueue: false,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
  dictDefaultMessage: "Drag an image here to upload, or click to select one",
  maxFiles: 15, // Maximum Number of Files
  maxFilesize: 8, // MB
  addRemoveLinks: true,
  dictRemoveFile: 'Remove',
  dictFileTooBig: 'Image is bigger than 8MB',

  // append hidden input and add selected images
  accept: function(file) {

    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function() {
      random = 1 + Math.floor(Math.random() * 1000);
      count = $(".dz-complete").length + "_" + random;
      let content = fileReader.result;
      console.log(count)
      //add dataid
      $('#botofform').append('<input type="text" class="cimages" name="cimages[]" data-id = "' + count + '" value="' + content + '">');

      file.previewElement.classList.add("dz-success");
      file.previewElement.setAttribute("data-id", count);

    }

    file.previewElement.classList.add("dz-complete");

  },
  removedfile: function(file) {
    console.log("inside remove --" + file.previewElement.getAttribute("data-id"))
    var ids = file.previewElement.getAttribute("data-id") // get attr where file is been removed 
    $("#botofform input[data-id=" + ids + "]").remove() //remove input field as well
    file.previewElement.remove(); //remove file

  }
});

$(function() {
  $(".dropzone").sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function(event, ui) {
      //cloned div
      var cloned = $('div#botofform').clone()
      $('#botofform').html("") //empty it
      //loop through dropzone..
      $('.dropzone .dz-complete').each(function() {
        var data_id = $(this).data('id') //get data-id
        $(cloned).find("input[data-id=" + data_id + "]").clone().appendTo($('#botofform')) //find input which has that data-id and append same to bottmform
      });

    }

  });
});

<link rel="stylesheet" href=" http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//Drop zone box
<div class="dropzone" id="my-awesome-dropzone" action="#">
  <div class="fallback">
    <input name="cimages[]" type="file" multiple />
  </div>
  <div class="clearfix"></div>
</div>
<div id="botofform"></div>