ShadowCaster Posts - Answer Overflow

ShadowCaster

•Created by ShadowCaster on 4/29/2025 in #❓・help

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>

<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>

6 replies

Gaming

Programming