feat: upload image before and after

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]}, {
+                    let formData = new FormData();
-                        before: (xhr) => {
+                    formData.append('file', input.files[0]);
-                            this.$emit('before', true);
+                    formData.append('batch_id', this.batch_id  ? this.batch_id : makeid(50));
-                            //maybe do something else here
+                    this.$emit('before');
-                        },
+                    this.$axios.post(this.$_url('storeFile'), formData).then((response) => {
-                    }).then((response) => {
+                        this.$emit('after');
-                        this.media = response.data.media;
+                        this.$emit('uploaded', response.data.data)
-                        this.$emit('uploaded', response.data)
+                    }).catch( error => {
+                        this.$emit('after');
+                        this.$emit('error', error);
                     });
                 }
             }