Dropzone, add each new file in the beginning of preview container

Question

I am using dropzone to handle file uploading and I am using preview container to specify the place where uploaded files should be shown.

So my configuration is the following (only relevant part is left):

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

The problem is that in that container I already show some files and the new files are downloaded in the end of the list. What I want to do is to add them in the beginning. Is there a way to achieve this?

Answer 1

Inside your dropzone.js file, find the code that adds the file preview to the preview container. It should look like this:

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

Change it to

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

just prepend preview element to dropzone

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

Answer 3

Create your dropzone instance

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

Then use the addedfile event to modify the preview with prepending instead of appending.

myDropzone.on("addedfile", function(file)
{
  jQuery('.filesList').prepend(jQuery(file.previewElement));
}

Answer 4

You have two options without modifying the library source code.

1) Disable previewsContainer and handle the preview element in the addedFile event:

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) Override the addedfile option:

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;
    }
});

Note: When using one of these suggestions you have to handle some functionality yourself like the addRemoveLinks option and preview removal.