How to send a form with data and a File in Vuejs 3 and FastAPI?

Question

Hi I am trying to create a very simple form where I can send two fields, that they are family_type_id y an image the thing is when I try to send them, Fast API displays me an error saying this:

detail: 
   [{loc: ["query", "family_type_id"], msg: "field required", type: "value_error.missing"}]
   0: 
    {loc: ["query", "family_type_id"], msg: "field required", type: "value_error.missing"}

It says that I am not sending the family_type_id and the schema is blocking me, but it is not true because I am sending the data like this:

methods: {
  handleFileChange(event) {
    this.file = event.target.files[0];
  },
  handleSubmit() {
    const formData = new FormData();
    formData.append('family_type_id', this.familyTypeId);
    formData.append('support', this.file);

    // Usando vue-axios para enviar la solicitud
    axios.post('http://localhost:8000/family_core_data/store', formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    })
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });
  },

how you can see I am sending the data with POST and I am using formData to append everu single field and then sending all.. my schema en Fast API is this one:

from pydantic import BaseModel, Field
from fastapi import UploadFile
from typing import Union
from datetime import datetime
from decimal import Decimal

class FamilyCoreDatum(BaseModel):
   family_type_id: int

My router is this one:

@family_core_data.post("/store")
def store(data: FamilyCoreDatum = Depends(), image: UploadFile = File(...)):
   data_received = data.dict()

    return {"message": data_received['family_type_id'], "image_filename": image.filename}

somebody could tell me what I am not seeing ? because I see that it's ok... Thanks.

score 0 · Answer 1 · answered Aug 11 '23 at 08:55

Using Depends(), when declaring the data parameter (along with using FamilyCoreDatum Pydantic model as the type of it) in your endpoint, would render data to be expected as query, not form, data.

You should instead define Form data in your endpoint using Form(), or have a look at this answer for more options on how to upload both File and Form, or JSON, data in FastAPI.

How to send a form with data and a File in Vuejs 3 and FastAPI?

1 Answers1