How to use the dropzone function in dropzone

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 &&

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

onShownModal() {
        // File uploading is allowed only if either Indexeddb or WebSQL is supported
        if (Modernizr.indexeddb || Modernizr.websqldatabase) {
            this.dropzone = new Dropzone('.dropzone', {
                url                : '/#notes',
                clickable          : true,
                accept             : _.bind(this.getImage, this),
                thumbnailWidth     : 100,
                thumbnailHeight    : 100,
                previewTemplate    : this.dropzoneTemplate,
                dictDefaultMessage : _.i18n('Drop files'),
            });
        }
    }

initDropzone() {
            this.dropzone = new Dropzone(this.$refs.uploadContainer, {
                url: ApiClient.$baseUrl + '/screens',
                method: 'post',
                paramName: 'file',
                timeout: 0,
                parallelUploads: 1, // limit parallel uploads to keep seletection files order
                uploadMultiple: false,
                thumbnailWidth: null,
                thumbnailHeight: null,
                addRemoveLinks: false,
                createImageThumbnails: false,
                previewTemplate: '<div style="display: none"></div>',
            });

            this.dropzone.on('addedfile', (file) =&gt; {
                // update the authorization header each time when a new file is added
                this.dropzone.options.headers = Object.assign(this.dropzone.options.headers || {}, {

ready () {
            let component = this

            let previewNode = document.querySelector("#template");
            previewNode.id = "";
            let previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);

            let myDropzone = new Dropzone(document.getElementById('actions'), { // Make the whole body a dropzone
                url: this.action, // Set the url
                thumbnailWidth: 400,
                thumbnailHeight: 250,
                parallelUploads: 20,
                previewTemplate: previewTemplate,
                autoQueue: false, // Make sure the files aren't queued until manually added
                previewsContainer: "#previews", // Define the container to display the previews
                clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
            });

            myDropzone.on("addedfile", function(file) {
                // hide actions
                document.getElementById('actions').style.display = "none";
                // Hookup the start button
                file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };

initDropZone() {
        const self = this;
        const data = this.data.get('data') && JSON.parse(this.data.get('data'));
        const storage = this.data.get('storage');
        const name = this.data.get('name');
        const loadInfo = this.loadInfo.bind(this);
        const dropname = this.dropname;
        const groups = this.data.get('groups');
        const multiple = !!this.data.get('multiple');
        const isMediaLibrary = this.data.get('is-media-library');

        this.dropZone = new Dropzone(dropname, {
            url: platform.prefix('/systems/files'),
            method: 'post',
            uploadMultiple: true,
            maxFilesize: this.data.get('max-file-size'),
            maxFiles: multiple ? this.data.get('max-files') : 1,
            acceptedFiles: this.data.get('accepted-files'),
            resizeQuality: this.data.get('resize-quality'),
            resizeWidth: this.data.get('resize-width'),
            resizeHeight: this.data.get('resize-height'),
            paramName: 'files',

            previewsContainer: `${dropname} .visual-dropzone`,
            addRemoveLinks: false,
            dictFileTooBig: 'File is big',
            autoDiscover: false,

private setupDropzone() {
        let config: DropzoneOptions = {
            url: backend.servicesEndpoint + "/api/file/upload",
            headers: backend.getAuthorizationHeaders(),
            acceptedFiles: "image/*",
            params: { companyId: backend.getUserId() },
            createImageThumbnails: false,
            addRemoveLinks: false,
            previewTemplate: '<div></div>',
            previewsContainer: this.refs.dropzoneOutput,
            clickable: ".edit-image__dropzone-content",
            maxFiles: 1
        };

        Dropzone.autoDiscover = false;
        this.dropzone = new Dropzone(this.refs.dropzone, config);

        this.dropzone.on("uploadprogress", this.onProgress);
        this.dropzone.on("success", this.onSuccess);
        this.dropzone.on("error", this.onError);
        this.dropzone.on("complete", this.hideUpload);
        this.dropzone.on("addedfile", this.onAddedFile);
        this.dropzone.on("dragover", this.hideUploadError);
        this.dropzone.on("drop", this.hideUploadError);

        this.backendToken = backend.accessTokenChanged.bind(() =&gt;
            this.dropzone['options'].headers = backend.getAuthorizationHeaders());
    }