nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 00:42:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
resources/js/components/Others/Forms/ImageInput.vue
View File

@@ -1,86 +1,97 @@
<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"
>
<div
class="relative flex h-[175px] items-center justify-center rounded-lg bg-light-background dark:bg-2x-dark-foreground"
:class="{ 'is-error': error }"
>
<!--Reset Image-->
<div
v-if="imagePreview"
@click="resetImage"
class="absolute right-0 top-0 z-10 flex h-7 w-7 -translate-y-3 translate-x-3 cursor-pointer items-center justify-center rounded-md rounded-full bg-white shadow-lg"
>
<x-icon size="14" class="vue-feather" />
</div>
</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"
/>
@change="showImagePreview($event)"
ref="file"
type="file"
class="absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer opacity-0"
/>
<!--Default image preview-->
<img v-if="imagePreview" :src="imagePreview" ref="image" class="absolute w-full h-full object-contain py-4 px-12" />
<!--Default image preview-->
<img
v-if="imagePreview"
:src="imagePreview"
ref="image"
class="absolute h-full w-full object-contain py-4 px-12"
/>
<!--Drop image zone-->
<!--Drop image zone-->
<div v-if="!isData" class="text-center">
<image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
<image-icon size="34" class="vue-feather text-theme mb-4 inline-block" />
<b class="font-bold text-base block leading-3">
<b class="block text-base font-bold 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.' }}
{{
$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'
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()
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()
if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
const file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
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
},
// 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>