Skip to content

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

@GMKR

Description

@GMKR

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions