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

dropzone.js

Solution

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

Problem

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?

Original source