laravel-vue-file-share/resources/js/Components/custom/UploadFiles.vue
2023-10-17 22:45:04 -07:00

30 lines
1 KiB
Vue

<script setup>
import { MenuItem } from "@headlessui/vue";
import { emitter } from "../../emitter.js";
// emit the upload event with Mitt
const upload = (event) => {
emitter.emit("FILE_UPLOAD_STARTED", event.target.files);
};
</script>
<template>
<MenuItem v-slot="{ active }">
<a
href="#"
class="block w-full items-center rounded-md py-2 border border-zinc-900 block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-zinc-100 hover:border-sky-500 dark:hover:border-sky-600 hover:ring-sky-500 dark:hover:ring-sky-600transition duration-150 ease-in-out relative"
>Upload Files
<input
@change="upload"
type="file"
id="file"
class="absolute left-0 top-2 bottom-0 right-0 opacity-0"
multiple
/>
<label
for="file"
class="opacity-0 absolute left-0 top-0 bottom-0 right-0 cursor-pointer"
></label>
</a>
</MenuItem>
</template>