Dropzone, добавьте каждый новый файл в начало контейнера предварительного просмотра

Question

Я использую dropzone для обработки загрузки файлов, и я использую контейнер предварительного просмотра, чтобы указать место, где должны отображаться загруженные файлы.

Так моя конфигурация является следующая (релевантно только часть слева направо):

var myDropzone = new Dropzone("#fileUploadHandler",{ 
    previewsContainer: '.filesList' 
}); 

Проблема заключается в том, что в этом контейнере я уже показывают некоторые файлы и новые файлы будут загружены в конце списка. Я хочу добавить их в начале. Есть ли способ достичь этого?

Answer 1

Внутри файла dropzone.js найдите код, который добавляет предварительный просмотр файла в контейнер предварительного просмотра. Он должен выглядеть следующим образом:

if (this.previewsContainer) { 
     file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim()); 
     file.previewTemplate = file.previewElement; 
     this.previewsContainer.appendChild(file.previewElement); 

изменить его на

if (this.previewsContainer) { 
     file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim()); 
     file.previewTemplate = file.previewElement; 
     // check to see if there is already a child element in the preview container 
     var previewFirstChild = this.previewsContainer.firstChild; 
     if (previewFirstChild) { 
     // if so, add the new file preview in front of the first child 
     this.previewsContainer.insertBefore(file.previewElement, previewFirstChild); 
     } else { 
     // otherwise just append it 
     this.previewsContainer.appendChild(file.previewElement); 
     } 

Answer 2

У вас есть два варианта без изменения исходного кода библиотеки.

1) Отключить previewsContainer и обрабатывать элемент предварительного просмотра в addedFile события:

var dropzone = new Dropzone('#fileUploadHandler', { 
    previewsContainer: false, 
    init: function() { 
     this.on('addedfile', function (file) { 
      file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim()); 

      var previews = document.getElementById('#previews'); 
      previews.insertBefore(file.previewElement, previews.firstChild); 
     } 
    } 
}); 

2) Переопределение addedfile вариант:

var dropzone = new Dropzone('#fileUploadHandler', { 
    previewsContainer: '.filesList', 
    addedfile: function (file) { 
     file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim()); 

     this.previewsContainer.insertBefore(file.previewElement, this.previewsContainer.firstChild); 

     return false; 
    } 
}); 

Примечание: При использовании одного из них вы должны сами использовать некоторые функции, например, addRemoveLinks и удаление предварительного просмотра.

Answer 3

только предварять предварительный элемент Dropzone

var dropzone = new Dropzone('#fileUploadHandler', { 
    init: function() { 
     this.on('addedfile', function (file) { 
      $('#fileUploadHandler').prepend($(file.previewElement)); 
     } 
    } 
});