Files
FEDEO/components/DocumentUploadModal.vue

99 lines
2.4 KiB
Vue

<script setup >
const props = defineProps({
fileData: {
type: Object,
default: {
type: null
}
}
})
const emit = defineEmits(["uploadFinished"])
const modal = useModal()
const profileStore = useProfileStore()
const uploadInProgress = ref(false)
const availableFiletypes = ref([])
const setup = async () => {
availableFiletypes.value = await useSupabaseSelect("filetags")
}
setup()
const uploadFiles = async () => {
uploadInProgress.value = true;
await useFiles().uploadFiles(props.fileData, document.getElementById("fileUploadInput").files,[],true)
uploadInProgress.value = false;
emit("uploadFinished")
modal.close()
}
</script>
<template>
<UModal>
<UCard :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Datei hochladen
</h3>
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark-20-solid"
class="-my-1"
@click="modal.close()"
:disabled="uploadInProgress"
/>
</div>
</template>
<UFormGroup
label="Datei:"
>
<UInput
type="file"
id="fileUploadInput"
multiple
accept="image/jpeg, image/png, image/gif, application/pdf"
/>
</UFormGroup>
<UFormGroup
label="Typ:"
class="mt-3"
>
<USelectMenu
option-attribute="name"
value-attribute="id"
searchable
searchable-placeholder="Suchen..."
:options="availableFiletypes"
v-model="props.fileData.type"
>
<template #label>
<span v-if="props.fileData.type">{{availableFiletypes.find(x => x.id === props.fileData.type).name}}</span>
<span v-else>Keine Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<template #footer>
<UButton
@click="uploadFiles"
:loading="uploadInProgress"
:disabled="uploadInProgress"
>Hochladen</UButton>
</template>
</UCard>
</UModal>
</template>
<style scoped>
</style>