mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center rounded-lg relative h-[175px] dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-error': error }">
|
|
|
|
<!--Reset Image-->
|
|
<div
|
|
v-if="imagePreview"
|
|
@click="resetImage"
|
|
class="absolute z-10 right-0 top-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-white shadow-lg rounded-full -translate-y-3 translate-x-3"
|
|
>
|
|
<x-icon size="14" class="vue-feather" />
|
|
</div>
|
|
|
|
<input
|
|
@change="showImagePreview($event)"
|
|
ref="file"
|
|
type="file"
|
|
class="opacity-0 absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer"
|
|
/>
|
|
|
|
<!--Default image preview-->
|
|
<img v-if="imagePreview" :src="imagePreview" ref="image" class="absolute w-full h-full object-contain py-4 px-12" />
|
|
|
|
<!--Drop image zone-->
|
|
<div v-if="!isData" class="text-center">
|
|
<image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
|
|
|
|
<b class="font-bold text-base block leading-3">
|
|
{{ $te('input_image.title') ? $t('input_image.title') : 'Upload Image' }}
|
|
</b>
|
|
<small class="text-xs text-gray-500">
|
|
{{ $te('input_image.supported') ? $t('input_image.supported') : 'Supported formats are .png, .jpg, .jpeg.' }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {XIcon, ImageIcon} from 'vue-feather-icons'
|
|
|
|
export default {
|
|
name: 'ImageInput',
|
|
props: ['image', 'error'],
|
|
components: {
|
|
ImageIcon,
|
|
XIcon,
|
|
},
|
|
data() {
|
|
return {
|
|
imagePreview: undefined,
|
|
}
|
|
},
|
|
computed: {
|
|
isData() {
|
|
return !(typeof this.imagePreview === 'undefined' || this.imagePreview === '')
|
|
},
|
|
},
|
|
methods: {
|
|
resetImage() {
|
|
this.imagePreview = undefined
|
|
this.$emit('input', undefined)
|
|
},
|
|
showImagePreview(event) {
|
|
const imgPath = event.target.files[0].name,
|
|
extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
|
|
|
|
if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
|
|
const file = event.target.files[0],
|
|
reader = new FileReader()
|
|
|
|
reader.onload = () => (this.imagePreview = reader.result)
|
|
|
|
reader.readAsDataURL(file)
|
|
|
|
// Update user avatar
|
|
this.$emit('input', event.target.files[0])
|
|
} else {
|
|
alert(this.$t('validation_errors.wrong_image'))
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
// If has default image then load
|
|
if (this.image) this.imagePreview = this.image
|
|
},
|
|
}
|
|
</script>
|