mirror of
https://github.com/elk-zone/elk
synced 2024-11-27 22:38:11 +09:00
107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import { fileOpen } from 'browser-fs-access'
|
|
import type { FileWithHandle } from 'browser-fs-access'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
/** 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 emit = defineEmits<{
|
|
(event: 'pick', value: FileWithHandle): void
|
|
(event: 'error', code: number, message: string): void
|
|
}>()
|
|
|
|
const { modelValue: file } = defineModel<{
|
|
modelValue: FileWithHandle | null
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
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)
|
|
|
|
const pickImage = async () => {
|
|
const image = await fileOpen({
|
|
description: 'Image',
|
|
mimeTypes: props.allowedFileTypes,
|
|
})
|
|
|
|
if (!props.allowedFileTypes.includes(image.type)) {
|
|
emit('error', 1, t('error.unsupported_file_format'))
|
|
return
|
|
}
|
|
else if (image.size > props.allowedFileSize) {
|
|
emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
|
|
return
|
|
}
|
|
|
|
file.value = image
|
|
emit('pick', file.value)
|
|
}
|
|
|
|
watch(file, (image, _, onCleanup) => {
|
|
let expired = false
|
|
onCleanup(() => expired = true)
|
|
|
|
if (!image) {
|
|
previewImage.value = ''
|
|
return
|
|
}
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(image)
|
|
reader.onload = (evt) => {
|
|
if (expired)
|
|
return
|
|
previewImage.value = evt.target?.result as string
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<label
|
|
class="bg-slate-500/10 focus-within:(outline outline-primary)"
|
|
relative
|
|
flex justify-center items-center
|
|
cursor-pointer
|
|
of-hidden
|
|
@click="pickImage"
|
|
>
|
|
<img
|
|
v-if="imageSrc"
|
|
:src="imageSrc"
|
|
:class="imgClass || ''"
|
|
object-cover
|
|
w-full
|
|
h-full
|
|
>
|
|
<span absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
|
|
<span block i-ri:upload-line />
|
|
</span>
|
|
|
|
<span
|
|
v-if="loading"
|
|
absolute inset-0
|
|
bg="black/30" text-white
|
|
flex justify-center items-center
|
|
>
|
|
<span class="animate-spin animate-duration-[2.5s] preserve-3d">
|
|
<span block i-ri:loader-4-line text-4xl />
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</template>
|