-
Notifications
You must be signed in to change notification settings - Fork 83
Closed
Labels
enhancementNew feature or requestNew feature or request
Description
Describe the bug
useUpload function is throwing error H3Error: Missing files when FileList is passed as input
Steps to reproduce
Steps to reproduce the behavior:
- Open file dialog with VueUse
useFileDialog - Call useUpload inside
onChangefunction - See error
H3Error: Missing files
<script setup lang="ts">
import { useFileDialog } from "@vueuse/core";
const upload = useUpload("/api/images", { method: "PUT" });
const { open, onChange } = useFileDialog({
multiple: true,
});
onChange(async (files) => {
if (!files) {
return;
}
console.log(files instanceof FileList); // true
console.log(Array.isArray(files)); // false <-- useUpload composable is checking this and default to empty array
await upload(files); // FileList is valid input type but throws "H3Error: Missing files"
await upload(Array.from(files)); // This works
});
</script>
<template>
<div class="border-2 border-dashed border-gray-300 rounded-md p-6">
<div class="flex flex-col items-center justify-center">
<Icon name="i-lucide-image-plus" class="w-10 h-10" />
<UButton variant="ghost" size="sm" @click="open">
Browse
</UButton>
</div>
</div>
</template>Expected behavior
useUpload should work with FileList as input without Array.from conversion
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request