upload image

resources/js/Global/components/Inputs/UploadImage.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="upload-example">
+        <img class="upload-example-cropper" width="220px" height="220px" :src="media"/>
+        <div class="button-wrapper">
+            <v-btn
+                large
+                :color="$_color('product_option')"
+                @click.native="$refs['image_'+uniqueId][0].click()"
+                light
+            >
+                <input
+                    type="file"
+                    :ref="'image_'+uniqueId"
+                    :name="'image_' + uniqueId"
+                    v-show="false"
+                    @change="uploadImage($event, val)"
+                    accept="image/*"
+                />
+                <v-icon dark>WMi-upload</v-icon>
+                آپلود عکس
+            </v-btn>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            batch_id: {default: '', type: String},
+            media: {default: '', type: String},
+        },
+        data: () => ({
+            uniqueId: Math.floor(Math.random() * 10000),
+        }),
+        methods: {
+            uploadImage(event, value) {
+                // 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)
+                    });
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    /*.upload-example-cropper {*/
+    /*    margin: 0 auto;*/
+    /*    border: solid 1px #d2d2d2;*/
+    /*    height: 220px;*/
+    /*    width: 220px;*/
+    /*    border-radius: 5px;*/
+    /*}*/
+</style>