Блог

Я обнаружил, как я мог бы заставить пользователя изменить очередь dropzone, но это изменяет только отображение файлов, и я получаю ошибку «Неперехваченная ошибка типа: очередь.forEach — это не функция». Как я мог бы заставить это работать?

 $("#demo-upload").sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '#demo-upload',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {
        var newQueue = '';
        var queue = dd.files;
        $('#demo-upload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {
            var name = el.getAttribute('data-name');
            queue.forEach(function (file) {
                if (file.name === name) {
                    newQueue.push(file);
                }
            });
        });

        dd.files = newQueue;

    }
});
  

Я искал решение этой проблемы и нашел точную реализацию в этом проекте CodePen. Ссылка на реализацию (Dropzone.js Сортируемая очередь jQueryUI

HTML

  <form action="/upload" class="dropzone" drop-zone="" id="file-dropzone"></form>
    <ul class="visualizacao sortable dropzone-previews" style="border:1px solid #000">

    </ul>
<div class="preview" style="display:none;">
  <li>
    <div>
    <div class="dz-preview dz-file-preview">
      <img data-dz-thumbnail />
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-success-mark"><span>✔</span></div>
    <div class="dz-error-mark"><span>✘</span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
  </div>
    </div>
  </li>  
</div>
  

CSS

 @import url('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css');
.sortable {
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sortable li {
    float: left;
    width: 120px;
    height: 120px;
    overflow:hidden;
    border:1px solid red;  
    text-align: center;
    margin:5px;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}
  

JS

 $(document).ready(function(){
 $('.sortable').sortable();

});

//DropzoneJS snippet - js
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.js',function(){
  // instantiate the uploader
  $('#file-dropzone').dropzone({ 
    url: "/upload",
    maxFilesize: 100,
    paramName: "uploadfile",
    maxThumbnailFilesize: 99999,
    previewsContainer: '.visualizacao', 
    previewTemplate : $('.preview').html(),
    init: function() {
      this.on('completemultiple', function(file, json) {
       $('.sortable').sortable('enable');
      });
      this.on('success', function(file, json) {
        alert('aa');
      });

      this.on('addedfile', function(file) {

      });

      this.on('drop', function(file) {
        console.log('File',file)
      }); 
    }
  });
});
$(document).ready(function() {});
  

После того, как я потратил на это много часов, у меня наконец есть решение, с помощью которого jquery sortable работает dropzone.js . Я поставлю интересующий скрипт на первое место, а полный скрипт dropzone js — на второе. В комментарии должно быть объяснено, что происходит.

Сначала вам понадобится эта функция

 //the function for replacing the array
    function newDropzoneArray(oldArray){
        // on the webpage search for all the images that have been uploaded
        var imageTags = $('#myDropzone').find('div.dz-image img');

        // the new array where we will put in the new files
        var current_queue = [];

        // iterate through all the images that have been uploaded by the user
        imageTags.each(function (index, imageTag) {
            // get the image name from the images
            imageName = imageTag.alt;

            // now we will iterate through the old array
            for (i = 0; i < oldArray.length; i  ) {
                /** if the name of the image on the website is the same as the image from the old array
                 * we will add it to the new array. You can see this as sorting the array.
                 */
                if (imageName === oldArray[i].name) {
                    current_queue.push(oldArray[i]);
                }
            }
        });
        // now we return the new dropzone array so that we can replace it.
        return current_queue;
    }
  

Затем в вашем init найдите //! важная часть //

     init: function() {
    // very important to make the sortable work
    var myDropzone = this;

    // In your drop zone you have your click handler event
    document.getElementById("submit").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();

        //here we replace the array with the new one
        //! IMPORTANT PART IS HAPPENING HERE.
        myDropzone.files = newDropzoneArray(myDropzone.files);

        // dropzone will now submit the request
        e.stopPropagation();
        myDropzone.processQueue();
    });
  

если вас интересует полный js-скрипт dropzone:

 $("#myDropzone").sortable({
    opacity: 0.7,
});

//the function for replacing the array
function newDropzoneArray(oldArray){
    // on the webpage search for all the images that have been uploaded
    var imageTags = $('#myDropzone').find('div.dz-image img');

    // the new array where we will put in the new files
    var current_queue = [];

    // iterate through all the images that have been uploaded by the user
    imageTags.each(function (index, imageTag) {
        // get the image name from the images
        imageName = imageTag.alt;

        // now we will iterate through the old array
        for (i = 0; i < oldArray.length; i  ) {
            /** if the name of the image on the website is the same as the image from the old array
             * we will add it to the new array. You can see this as sorting the array.
             */
            if (imageName === oldArray[i].name) {
                current_queue.push(oldArray[i]);
            }
        }
    });
    // now we return the new dropzone array so that we can replace it.
    return current_queue;
}

Dropzone.options.myDropzone = {

// Configuration
url: '../somewhere',
method: 'post',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
// The setting up of the dropzone
init: function() {
    // very important to make the sortable work
    var myDropzone = this;

    // In your drop zone you have your click handler event
    document.getElementById("submit").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();

        //here we replace the array with the new one
        myDropzone.files = newDropzoneArray(myDropzone.files);

        // dropzone will now submit the request
        e.stopPropagation();
        myDropzone.processQueue();
    });
    this.on('completemultiple', function(file, json) {
    });

    this.on("sendingmultiple", function(data, xhr, formData) {
    // of the sending event because uploadMultiple is set to true.
        formData.append("name", jQuery("#name").val());
        formData.append("sample1", jQuery("#sample1").val());
    });
    this.on("successmultiple", function(files, response) {
        // redirecting user on success. No message atm.
        var url = document.location.origin   "/somewhere_to_redirect";
        window.location.replace(url);
    });
    this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
    });

}

}