cssd-back/resources/js/vue/components/core/Dropzone.vue

<template>
  <div class="">
      <vue-dropzone id="customdropzone02"
          ref="myVueDropzone"
          :options="dropzoneOptions"
          :useCustomSlot="true"
          @vdropzone-sending = "sending"
          @vdropzone-success = "success"
          @vdropzone-removed-file = "afterRemove"
          @vdropzone-error = "error"
          class="WM-Relative" >
        <div class="dropzone-custom-content">
          <h3 class="dropzone-custom-title">Upload your files here</h3>
          <div class="subtitle">image or pdf or word</div>
        </div>
      </vue-dropzone>
  </div>
</template>

<script>
    import vue2Dropzone from 'vue2-dropzone'
    import 'vue2-dropzone/dist/vue2Dropzone.min.css'
    import { TokenService } from '@/services/auth/storage.service';
    import { ApiService } from "@/services";
    import { urls } from "@/config/urls";
    import toast from "@/services/global/toast.service";
    import { mapGetters } from 'vuex'

    export default {
        props: ['ModelID', 'Images', 'BatchID', 'ModelType'],
        components : {
            vueDropzone: vue2Dropzone
        },
        data: () => ({
            dropzoneOptions: {
            url: '/api/UploadFile',
            thumbnailWidth: 150,
            maxFilesize: 2,
            headers: { "Authorization": `Bearer ${TokenService.getToken()}` },
            addRemoveLinks: true
            },
        }),
        mounted() {
            this.loadImages();
        },
        methods: {
            loadImages(){
                let vm = this;
                if (vm.Images != null) {
                    vm.Images.forEach(function(image, key){
                        var file = { name: image.file_name, size:'1024', type: ' ', id: image.id};
                        vm.$refs.myVueDropzone.manuallyAddFile(file, '/'+image.path);
                    });
                }
            },
            success(file, response){
                file.id = response.data.id;
                if(typeof response.message !== 'undefined') {
                    toast.success(response.message, response.title);
                }
            },
            error(file, message, xhr){
                if(typeof message.errors !== 'undefined') {
                    for (const key in message.errors) {
                        if (message.errors.hasOwnProperty(key)) {
                            toast.error(message.errors[key], 'خطا');
                        }
                    }
                }
            },
            sending(file, xhr, form_data) {
                form_data.append('file', file);
                form_data.append('model_id', this.ModelID);
                form_data.append('model_type', this.ModelType);
                form_data.append('batch_id', this.BatchID);
            },
            async afterRemove( file, error, xhr) {
                let status = null;
                if (this.$refs.myVueDropzone.dropzone.disabled !== undefined) {
                    status = this.$refs.myVueDropzone.dropzone.disabled;
                }

                if (status !== true) {
                    let formdata = new FormData();
                    formdata.append('media_id', file.id);
                    formdata.append('name', file.name);
                    formdata.append('model_id', this.ModelID);
                    formdata.append('model_type', this.ModelType);
                    formdata.append('batch_id', this.BatchID);
                    let result = await ApiService.post(urls.deleteFile,formdata);
                }
            },
        }
    }
</script>