How to use dropzone - 10 common examples

mounted () {
        if (this.$isServer && this.hasBeenMounted) {
            return
        }
        this.hasBeenMounted = true

        this.dropzone = new Dropzone(this.$refs.dropzoneElement, this.dropzoneSettings)
        const vm = this

        this.dropzone.on('thumbnail', (file, dataUrl) => {
            vm.$emit('vdropzone-thumbnail', file, dataUrl)
        })

        this.dropzone.on('addedfile', function (file) {
            let isDuplicate = false // eslint-disable-line no-unused-vars

            const _removeLink = Dropzone.createElement('<a data-dz-remove="" class="dz-remove btn-icon"><i class="fas fa-times"></i></a>')
            file.previewElement.appendChild(_removeLink)

            if (vm.duplicateCheck) {
                if (this.files.length) {
                    var _i, _len
                    // -1 to exclude current file

mounted () {
        if (this.$isServer && this.hasBeenMounted) {
            return;
        }
        this.hasBeenMounted = true;

        this.dropzone = new Dropzone(this.$refs.dropzoneElement, this.dropzoneSettings);
        const vm = this;

        this.dropzone.on('thumbnail', (file, dataUrl) => {
            vm.$emit('vdropzone-thumbnail', file, dataUrl);
        });

        this.dropzone.on('addedfile', function (file) {
            let isDuplicate = false; // eslint-disable-line no-unused-vars

            if (vm.duplicateCheck) {
                if (this.files.length) {
                    var _i, _len;
                    // -1 to exclude current file
                    for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
                        if (this.files[_i].name === file.name &&
                            this.files[_i].size === file.size &&

function init() {
        // Disable auto discover for all elements
        Dropzone.autoDiscover = false;

        return {
            add: (id, view, uploadUrl) => {
                let loader = new Dropzone(view, {
                    url      : uploadUrl,
                    paramName: 'award',
                    clickable: true,
                    maxFiles : 1,

                    headers: {
                        'x-ns-award-entity-id': id,
                        'x-csrf-token'        : window.config.csrf_token
                    },

                    thumbnailWidth : null,
                    thumbnailHeight: null,

})

                this.on('error', function (file, errorMessage, xhr) {
                    console.error(errorMessage)
                })

                this.on('sending', function (file, xhr, formData) {
                    xhr.ontimeout = () => {
                        _self.options.onError('Server Timeout')
                        console.error('Server Timeout')
                    }
                })
            }
        }

        Dropzone.autoDiscover = this.options.autoDiscover

        try {
            /* eslint-disable no-new */
            new Dropzone(this.options.selector, Dropzone.options.uploadDropzoneDocument)

            let $dropzone = $(this.options.selector)
            $dropzone.append(`<div class="dz-default dz-message"><span>${this.options.dictDefaultMessage}</span></div>`)
            let $dzMessage = $dropzone.find('.dz-message')
            $dzMessage.append(`
            <div class="circles-icons">
                <div class="circle circle-1"></div>
                <div class="circle circle-2"></div>
                <div class="circle circle-3"></div>
                <div class="circle circle-4"></div>
                <div class="circle circle-5"></div>
                <i class="uk-icon-rz-file"></i></div>

})

                this.on('sending', function (file, xhr, formData) {
                    xhr.ontimeout = () => {
                        _self.options.onError('Server Timeout')
                        console.error('Server Timeout')
                    }
                })
            }
        }

        Dropzone.autoDiscover = this.options.autoDiscover

        try {
            /* eslint-disable no-new */
            new Dropzone(this.options.selector, Dropzone.options.uploadDropzoneDocument)

            let $dropzone = $(this.options.selector)
            $dropzone.append(`<div class="dz-default dz-message"><span>${this.options.dictDefaultMessage}</span></div>`)
            let $dzMessage = $dropzone.find('.dz-message')
            $dzMessage.append(`
            <div class="circles-icons">
                <div class="circle circle-1"></div>
                <div class="circle circle-2"></div>
                <div class="circle circle-3"></div>
                <div class="circle circle-4"></div>
                <div class="circle circle-5"></div>
                <i class="uk-icon-rz-file"></i>
            </div>`)
            this.attached = true
        } catch (e) {
            console.error(e)

this.dropzone.on('addedfile', function (file) {
            let isDuplicate = false // eslint-disable-line no-unused-vars

            const _removeLink = Dropzone.createElement('<a data-dz-remove="" class="dz-remove btn-icon"><i class="fas fa-times"></i></a>')
            file.previewElement.appendChild(_removeLink)

            if (vm.duplicateCheck) {
                if (this.files.length) {
                    var _i, _len
                    // -1 to exclude current file
                    for (_i = 0, _len = this.files.length; _i &lt; _len - 1; _i++) {
                        if (this.files[_i].name === file.name &amp;&amp;
                            this.files[_i].size === file.size &amp;&amp;
                            this.files[_i].lastModifiedDate.toString() === file.lastModifiedDate.toString()) {
                            this.removeFile(file)
                            isDuplicate = true
                            vm.$emit('vdropzone-duplicate-file', file)
                        }
                    }
                }

.split(",")
          .map(function(t) {
            return t.trim();
          }).filter(function(t) {
            return t.length > 0;
          })
          .join(",");
      } catch(exp) {
        tags = form.find('#tags');
      }

      data.append('tags', tags);

      // attach images to the data
      // var files = form.find('#image-mobile')[0].files;
      var files = myDropzone.getFilesWithStatus(Dropzone.ADDED);
      for(var i = 0; i < files.length; i++) {
        var file = files[i];
        data.append('image-mobile['+i+']', file);
      }

      $.ajax({
        url: '/api/v1/submissions/',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(submission){
          // REDIRECT TO SUBMISSION PAGE
          self.trigger('created', submission);
        },

link(scope, element) {
            Dropzone.autoDiscover = false;

            const config = angular.isFunction(scope.dropzoneConfig) ? scope.dropzoneConfig() : scope.dropzoneConfig;

            // create a Dropzone for the element with the given options
            const dropzone = new Dropzone(element[0], config.options);

            // bind the given event handlers
            angular.forEach(config.eventHandlers, (handler, event) => {
                dropzone.on(event, handler);
            });

            // remove the dropzone instance
            scope.$on('$destroy', () => {
                dropzone.disable();
            });
        }
    };

export const createUploader = (element, options) => {

    $(element).html(`
        <div class="fallback">
            <input name="${options.name}[]" type="file">
        </div>
        <div data-dz-message="" class="dz-message">
            <span>${translate('add', { size: options.maxFilesize })}</span>
        </div>
    `);

    const dropzone = new Dropzone(element, {

        url: options.url,
        uploadMultiple: options.multiple,
        maxFiles: options.maxFiles,
        maxFilesize: options.maxFilesize,
        parallelUploads: options.parallelUploads,

        fallback() {
            // No mercy for the deprecated
            element.style.display = 'none';

            throw new Error('Dropzone not supported by this browser');
        },

        dictResponseError: translate('error.generic'),
        dictFileTooBig: translate('error.tooBig', { size: options.maxFilesize }),

render() {
    const dz = new Dropzone(this.element); // eslint-disable-line new-cap
    dz.on("complete", () => window.location.reload());
  }
}