add dropzone to test result form

2026-10-13 19:11:06 +03:30 · 2020-06-09 18:05:16 +04:30
parent 7496f1213f
commit a74e49af6f
14 changed files with 269 additions and 125 deletions
@@ -0,0 +1,95 @@
+<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">فایل مورد نظر خود را در این قسمت آپلود کنید</h3> -->
+          <div class="subtitle">Upload images here</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/UploadImage',
+            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: 'jpg', 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('image', 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.deleteImage,formdata);
+                }
+            },
+        }
+    }
+</script>
@@ -139,7 +139,7 @@
                    <hr class="v-divider theme--light" />
                </v-flex>
                <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
+                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.images" :key="key">
                        <img :src="'/'+img.path" style="width: 100%" />
                    </v-flex>
                </v-layout>