NuxtN
Nuxt•9mo ago•
6 replies
ShadowCaster

Multiple file uploads

Hello all, I am struggling with the file upload to the python-backed webserver. I did not find any answers to the problem at hand with Nuxt, so I am asking here. I have taken the inspiration from the documentation, alas it doesn't work as intended.

The problem is that the server receives the request with the form data containing only the file name but not the file contents (responds with HTTP 422). I am kinda struggling to pass around the file contents from the FormSubmitEvent to the API call.

Help would be appreciated.

<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>
Was this page helpful?