79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup>
|
|
import Navigation from "@/Components/custom/Navigation.vue";
|
|
import SearchForm from "@/Components/custom/SearchForm.vue";
|
|
import UserDropdown from "@/Components/custom/UserDropdown.vue";
|
|
import { emitter } from "@/emitter.js";
|
|
import { ref, onMounted } from "vue";
|
|
import { useForm, usePage } from "@inertiajs/vue3";
|
|
|
|
// get current page for file uploading
|
|
const page = usePage();
|
|
// make refs
|
|
const dragging = ref(false);
|
|
|
|
// add Mitt event listener on component load
|
|
onMounted(() => {
|
|
emitter.on("FILE_UPLOAD_STARTED", uploadFiles);
|
|
});
|
|
|
|
// file drop function
|
|
const onDrop = (event) => {
|
|
dragging.value = false;
|
|
// get dragged files
|
|
const files = event.dataTransfer.files;
|
|
// check if files exist, then upload
|
|
// note that folders can be falsy here
|
|
if (files.length) {
|
|
uploadFiles(files);
|
|
}
|
|
};
|
|
|
|
// create form input for file upload
|
|
const fileUpload = useForm({
|
|
files: [],
|
|
parent_id: null,
|
|
});
|
|
|
|
// upload files function
|
|
const uploadFiles = (files) => {
|
|
// fill out form
|
|
fileUpload.files = files;
|
|
fileUpload.parent_id = page.props.folder.id;
|
|
|
|
// send form to backend for processing
|
|
fileUpload.post(route("file.new"));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen w-full bg-zinc-900 text-gray-100 flex gap-4">
|
|
<Navigation />
|
|
<main
|
|
@drop.prevent="onDrop"
|
|
@dragover.prevent="dragging = true"
|
|
@dragleave.prevent="dragging = false"
|
|
class="flex flex-col flex-1 px-4 overflow-hidden"
|
|
>
|
|
<template v-if="dragging">
|
|
<div
|
|
class="text-lg w-full h-full flex flex-col items-center justify-center border-2 border-dashed border-gray-700"
|
|
>
|
|
<div
|
|
class="w-1/5 h-1/5 border-2 rounded-lg border-gray-700 text-gray-300 text-6xl flex items-center justify-center"
|
|
>
|
|
<div class="arrow">+</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="flex items-center justify-between w-full">
|
|
<SearchForm />
|
|
<UserDropdown />
|
|
</div>
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
</main>
|
|
</div>
|
|
</template>
|