Initial commit

resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="dropzone" :class="{ 'is-error': error }">
+        <input
+                ref="file"
+                type="file"
+                @change="showImagePreview($event)"
+                :name="name"
+                class="dummy"
+        />
+        <img
+                ref="image"
+                :src="imagePreview"
+                class="image-preview"
+                v-if="data || imagePreview"
+        />
+    </div>
+</template>
+
+<script>
+
+    export default {
+        props: ['label', 'name', 'avatar', 'info', 'error'],
+        data() {
+            return {
+                imagePreview: undefined
+            }
+        },
+        watch: {
+            imagePreview(val) {
+                this.$store.commit('UPDATE_AVATAR', val)
+            }
+        },
+        methods: {
+            showImagePreview(event) {
+                const imgPath = event.target.files[0].name,
+                    extn = imgPath
+                        .substring(imgPath.lastIndexOf('.') + 1)
+                        .toLowerCase()
+
+                if (['png', 'jpg', 'jpeg'].includes(extn)) {
+                    const file = event.target.files[0],
+                        reader = new FileReader()
+
+                    reader.onload = () => (this.imagePreview = reader.result)
+
+                    reader.readAsDataURL(file)
+
+                    // Update user avatar
+                    this.$updateImage('/user/profile', 'avatar', event.target.files[0])
+                } else {
+                    alert('You may have uploaded the wrong file, try again!')
+                }
+            }
+        },
+        created() {
+            // If has default image then load
+            if (this.avatar) this.imagePreview = this.avatar
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .dropzone {
+        position: relative;
+        line-height: 0;
+
+        input[type='file'] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+            width: 100%;
+            cursor: pointer;
+        }
+
+        .image-preview {
+            width: 75px;
+            height: 75px;
+            object-fit: cover;
+            border-radius: 8px;
+            border: 1px dashed $theme;
+            padding: 2px;
+        }
+    }
+</style>