nuxt-hub / core

Build full-stack applications with Nuxt on CloudFlare, with zero configuration.
https://hub.nuxt.com
Apache License 2.0
992 stars 57 forks source link

useUpload doesn't work when FileList is passed as input #258

Closed GMKR closed 2 months ago

GMKR commented 2 months ago

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:

  1. Open file dialog with VueUse useFileDialog
  2. Call useUpload inside onChange function
  3. 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

atinux commented 2 months ago

Happy to open a pull request to support FileList? We only need to transform it as array before sending to the API

atinux commented 2 months ago

Can you test with:

pnpm add https://pkg.pr.new/nuxt-hub/core/@nuxthub/core@260

And confirm it works?