Ч3. Vue3 Drop аватар

[@Jak_Fresko]

Можно код

[@lectoria]

загрузить

Отпустите файл
import Button from "@/components/Button.vue";
import Icon from "@/components/Icon.vue";
import { ref } from "vue";
import { useDropZone } from '@vueuse/core';
import { useEventHandler } from "@/use/eventhandler";
const props = defineProps({
size: {
type: String,
validator(value) {
return ['xl', 'l', 's'].includes(value);
}
},
editable: Boolean,
});
const emit = defineEmits([
'image-set',
'delete'
]);
const refDropZone = ref();
const input = ref();
const imageUrl = ref('');
const { isOverDropZone } = useDropZone(refDropZone, onDrop);
function onDrop(files){
if(!props.editable) return;
const file = files[0];
if(!['image/jpeg', 'image/png'].includes(file.type)){
alert('Файл должен быть изображением');
return;
}
imageUrl.value = URL.createObjectURL(file);
emit('image-set', file);
}
useEventHandler('change', input, () => onDrop(input.value.files));
function deleteFile(){
imageUrl.value = '';
emit('delete');
}