elk/components/common/CommonInputImage.vue

122 lines
2.8 KiB
Vue
Raw Normal View History

<script lang="ts" setup>
const props = withDefaults(defineProps<{
modelValue?: File
/** The image src before change */
original?: string
/** Allowed file types */
allowedFileTypes?: string[]
/** Allowed file size */
allowedFileSize?: number
imgClass?: string
loading?: boolean
}>(), {
allowedFileTypes: () => ['image/jpeg', 'image/png'],
allowedFileSize: 1024 * 1024 * 5, // 5 MB
})
const emits = defineEmits<{
(event: 'update:modelValue', value: File): void
(event: 'error', code: number, message: string): void
}>()
const vmFile = useVModel(props, 'modelValue', emits, { passive: true })
const { t } = useI18n()
const elInput = ref<HTMLInputElement>()
function clearInput() {
if (elInput.value)
elInput.value.value = ''
}
function selectImage(e: Event) {
const target = e.target as HTMLInputElement
const image = target.files?.[0]
if (!image) {
vmFile.value = image
}
else if (!props.allowedFileTypes.includes(image.type)) {
emits('error', 1, t('error.unsupported_file_format'))
clearInput()
}
else if (image.size > props.allowedFileSize) {
emits('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
clearInput()
}
else {
vmFile.value = image
clearInput()
}
}
const defaultImage = computed(() => props.original || '')
/** Preview of selected images */
const previewImage = ref('')
/** The current images on display */
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
// Update the preview image when the input file change
watch(vmFile, (image, _, onCleanup) => {
let expired = false
onCleanup(() => expired = true)
if (image) {
const reader = new FileReader()
reader.readAsDataURL(image)
reader.onload = (e) => {
if (expired)
return
previewImage.value = e.target?.result as string
}
}
else {
previewImage.value = ''
clearInput()
}
})
defineExpose({
clearInput,
})
</script>
<template>
<label
class="bg-slate-500/10 focus-within:(outline outline-primary)"
relative
flex justify-center items-center
cursor-pointer
of-hidden
>
<img
v-if="imageSrc"
:src="imageSrc"
:class="imgClass || ''"
object-cover
w-full
h-full
>
<div absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
<div i-ri:upload-line />
</div>
<div
v-if="loading"
absolute inset-0
bg="black/30" text-white
flex justify-center items-center
>
<div class="i-ri:loader-4-line animate-spin animate-duration-[2.5s]" text-4xl />
</div>
<input
ref="elInput"
type="file"
absolute opacity-0 inset-0 z--1
:accept="allowedFileTypes.join(',')"
@change="selectImage"
>
</label>
</template>