From 511103de57624e9b68e8bc576a5b321198fecf75 Mon Sep 17 00:00:00 2001
From: Saeid <saeidkhakbazan@gmail.com>
Date: Sun, 16 Aug 2020 15:15:54 +0430
Subject: [PATCH] feat: upload image before and after

---
 .../Global/components/Inputs/UploadImage.vue  | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/resources/js/Global/components/Inputs/UploadImage.vue b/resources/js/Global/components/Inputs/UploadImage.vue
index fbdb6d3..139053b 100644
--- a/resources/js/Global/components/Inputs/UploadImage.vue
+++ b/resources/js/Global/components/Inputs/UploadImage.vue
@@ -5,7 +5,7 @@
             <v-btn
                 large
                 :color="$_color('product_option')"
-                @click.native="$refs['image_'+uniqueId][0].click()"
+                @click.native="$refs['image_'+uniqueId].click()"
                 light
             >
                 <input
@@ -13,7 +13,7 @@
                     :ref="'image_'+uniqueId"
                     :name="'image_' + uniqueId"
                     v-show="false"
-                    @change="uploadImage($event, val)"
+                    @change="uploadImage($event)"
                     accept="image/*"
                 />
                 <v-icon dark>WMi-upload</v-icon>
@@ -23,28 +23,32 @@
     </div>
 </template>
 <script>
+    import {makeid} from '@Global/utils/common/math'
+
     export default {
         props: {
-            batch_id: {default: '', type: String},
+            batch_id: {default: null, type: String},
             media: {default: '', type: String},
         },
         data: () => ({
             uniqueId: Math.floor(Math.random() * 10000),
         }),
         methods: {
-            uploadImage(event, value) {
+            uploadImage(event) {
                 // Reference to the DOM input element
                 var input = event.target;
                 // Ensure that you have a file before attempting to read it
                 if (input.files && input.files[0]) {
-                    this.$axios.post(this.$_url('file'), {file: input.files[0]}, {
-                        before: (xhr) => {
-                            this.$emit('before', true);
-                            //maybe do something else here
-                        },
-                    }).then((response) => {
-                        this.media = response.data.media;
-                        this.$emit('uploaded', response.data)
+                    let formData = new FormData();
+                    formData.append('file', input.files[0]);
+                    formData.append('batch_id', this.batch_id  ? this.batch_id : makeid(50));
+                    this.$emit('before');
+                    this.$axios.post(this.$_url('storeFile'), formData).then((response) => {
+                        this.$emit('after');
+                        this.$emit('uploaded', response.data.data)
+                    }).catch( error => {
+                        this.$emit('after');
+                        this.$emit('error', error);
                     });
                 }
             }