How to upload a file from React frontend to FastAPI?

Question

I'm trying to upload a file from React frontend to FastAPI backend. The code I used is as shown below.

This is the FastAPI backend:

@app.post("/uploadfile")
async def create_upload_file(file: UploadFile = File(...)):
    return {"filename": file.filename}

This is the frontend:

const [file, uploadFile] = useState(null)

//when upload button clicked
function handleSubmit(){
    console.log(file[0].name)
    const formdata = new FormData();
    formdata.append(
      "file",
      file[0],
    )
    axios.post("/uploadfile", {
      file:formdata}, {
        "Content-Type": "multipart/form-data",
      })
          .then(function (response) {
            console.log(response); //"dear user, please check etc..."
          });
      
  }

// this is when file has been selected
  function handleChange(e){
    uploadFile(e.target.files); //store uploaded file in "file" variable with useState
  }

It returns a 422 (Unprocessable Entity). Here's the message detail from axios:

I am not quite familiar with the rules and format needed behind file uploading. Could someone clear my confusion?

Answer 1

This was helpful for me finding a bug in my code. I suspect your problem was nesting the formData inside another object in your first attempt: axios.post("/uploadfile", {file:formdata} ... should be axios.post("/uploadfile", formdata ....

For me, the trick was ensuring that the key to the formData.append exactly matches the name of the UploadFile parameter for my FastAPI endpoint.

In this example the name is file123.

In the React code you have:

formdata.append("file123", file[0])
axios.post("/uploadfile", formdata ...etc...

And in the Python code you have:

async def create_upload_file(file123: UploadFile = File(...)): ...etc...

Answer 2

Update from OP: I have managed to solve the problem by replacing the axios part with

const headers={'Content-Type': file[0].type}
await axios.post("/uploadfile",formdata,headers)
    .then()//etc

if anyone want to add more information on why that works please feel free to do so - since I'm not quite sure either.