Multiple file uploads

<template>
  <div class="container mx-auto">
    <h1>Upload files</h1>
    <UForm :state="state" @submit="onSubmit">
      <UFormField>
        <UInput v-model="state.files" required id="uploader" accept=".pdf" multiple="multiple" type="file" />
      </UFormField>

      <UButton type="submit" >
        Submit
      </UButton>
    </UForm>
    
    <div class="pt-3">
      <h2>Uploaded files</h2>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormSubmitEvent } from '@nuxt/ui'
import * as v from 'valibot'

const schema = v.object({
  files: v.array(v.string())
})

type Schema = v.InferOutput<typeof schema>

const state = reactive({
  files: null,
})

function onSubmit(event: FormSubmitEvent<Schema>) {
  console.log("data:", event.data)  

  fetch("http://localhost:8000/upload", {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
    body:  /* ? */,
  }).then((res) => {
    console.log("upload: ", res)
  })
}
</script>