willaengine/resources/js/Global/components/Inputs/Dropzone.vue

<template>
    <div>
        <vue-dropzone ref="myVueDropzone" id="dropzone" :destroyDropzone="false" @vdropzone-sending="setParams" @vdropzone-removed-file="removeFile"
                      :options="dropzoneOptions" @vdropzone-success="responseSuccess">
        </vue-dropzone>
    </div>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import { TokenService } from '@Global/services/storage.services'
import commonState from '@Global/store/modules/common/state';
import Routes from '@Global/utils/common/routes';
import { url } from '@Common/mixins/urls';
import axios from 'axios';
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
	props: {
        defaultMessage: { default: "<i class='WMi-upload'></i> لطفا تصاویر و فایل ها را اینجا اپلود کنید " },
        files: {default:() => ([])},
        batch_id: { required: true, type: String }
	},
	components: {
    	vueDropzone: vue2Dropzone
  	},
	data() {
        return {
            dropzoneOptions: {
                url: Routes.api() + url('storeFile'),
                thumbnailWidth: 200,
                headers: { "Authorization":  `Bearer ${TokenService.getToken()}`, "Module": `${commonState.current_module}` },
                addRemoveLinks: true,
                dictDefaultMessage: this.defaultMessage,
                sendingMultiple: true,
                removeType: "server"
            },
        }
    },
    computed: {
        batchId() {
            return this.batch_id;
        },
    },
    methods: {
        responseSuccess(file, response) {
            if (response.data && response.data.id) {
                file['id'] = response.data.id;
            }
        },
        removeFile(file, error, xhr) {
            if(this.dropzoneOptions.removeType == "server") {
                axios.delete(url('deleteFile', {file: file.id}));
            }
        },
        manuallyLoadFiles(files) { //file =[ {size: 123, name: "Icon", type: "image/png", url: "https://myvizo.com/img/logo_sm.png"}]
            if(Array.isArray(files) && files.length) {
                for (const file of files) {
                    this.$refs.myVueDropzone.manuallyAddFile({name: file.file_name, type: file.mime_type, id: file.id, size: file.size}, file.thumbnail);
                }
            }
        },
        manuallyRemoveAllFiles() {
            this.dropzoneOptions.removeType = "client";
            this.$refs.myVueDropzone.removeAllFiles();
            this.dropzoneOptions.removeType = "server";
        },
        setParams(file, xhr, formData) {
            formData.append('batch_id', this.batchId);
        },
    },
    watch: {
        files(files) {
            this.manuallyRemoveAllFiles();
            this.manuallyLoadFiles(files);
        }
    },
};
</script>
<style>
    .vue-dropzone {
        border: 1px solid #bdbdbd;
        background: #eeeeee;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>