koel/resources/assets/js/components/ui/upload/DropZone.vue

60 lines
1.6 KiB
Vue
Raw Normal View History

<template>
2024-05-08 09:11:32 +00:00
<OnClickOutside @trigger="close">
<div
v-if="allowsUpload && mediaPathSetUp"
:class="{ droppable }"
class="drop-zone h-[256px] max-h-[66vh] aspect-square outline-4 outline-dashed outline-gray-300
fixed z-10 top-0 left-0 rounded-3xl bg-black/40 flex flex-col-reverse items-center justify-center
overflow-hidden duration-200"
@dragleave="onDropLeave"
@dragover="onDragOver"
@drop="onDrop"
>
<h3 class="text-3xl mt-4 font-extralight">Drop to upload</h3>
<Icon :icon="faUpload" size="6x" />
</div>
</OnClickOutside>
</template>
<script lang="ts" setup>
import { faUpload } from '@fortawesome/free-solid-svg-icons'
2024-05-08 09:11:32 +00:00
import { ref } from 'vue'
import { OnClickOutside } from '@vueuse/components'
import { useUpload } from '@/composables'
const emit = defineEmits<{ (e: 'close'): void }>()
const { allowsUpload, mediaPathSetUp, handleDropEvent } = useUpload()
const droppable = ref(false)
const onDropLeave = () => (droppable.value = false)
const onDragOver = (event: DragEvent) => {
if (!event.dataTransfer?.types.includes('Files')) {
return false
}
event.preventDefault()
droppable.value = true
}
const onDrop = async (event: DragEvent) => {
event.preventDefault()
droppable.value = false
await handleDropEvent(event)
}
2024-02-24 15:37:01 +00:00
const close = () => emit('close')
</script>
2024-04-04 20:13:35 +00:00
<style lang="postcss" scoped>
.drop-zone {
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
&.droppable {
2024-04-04 22:20:42 +00:00
@apply h-[384px] outline-white bg-black/90;
box-shadow: 0 0 0 999rem rgba(0, 0, 0, 0.7);
}
}
</style>