axios upload file: Expected UploadFile, received: <class 'str'>

[tamis-laan]

First Check

• I added a very descriptive title to this issue.
• I used the GitHub search to find a similar issue and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.

Commit to Help

• I commit to help with one of those options 👆

Example Code

python
@router.post('/search', status_code=200)
async def search(size: int = 4, query: UploadFile = File(...)):
    //bla bla

var file = {
  "height": 1536,
  "type": "image/jpeg",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fceleb-29ac4ec3-be4e-439c-80d0-f29ada3c36aa/ImagePicker/3dc7f9fe-c0d3-4d2f-90e9-0b89fa8b1d72.jpg",
  "width": 2048,
}

var query = new FormData();
query.append('query', file)

var result = await axios.post(`${apiurl}/search`, query, {
  headers:{'content-type':'multipart/form-data'}
})

### Description

Confused when running the code in question fast api returns:

``` json
"_response": 
  "{
     \"detail\": [{\"loc\":[\"body\",\"query\"],\"msg\":\"Expected UploadFile, received: <class 'str'>\",\"type\":\"value_error\"}]
}"

Looks like the formData is interpreted as a string?

Operating System

Linux

Operating System Details

No response

FastAPI Version

latest

Python Version

latest

Additional Context

No response

[tamis-laan]

The strange thing is, I don't see a difference with the documentation:
https://ianrufus.com/blog/2020/12/fastapi-file-upload/

And using curl everything works, as wel as through the swagger ui.

[tamis-laan]

Oke managed to fix this problem, turns out you need a name parameter:

import * as mime from 'mime'

var file = {
  "height": 1536,
  "type": "image/jpeg",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fceleb-29ac4ec3-be4e-439c-80d0-f29ada3c36aa/ImagePicker/3dc7f9fe-c0d3-4d2f-90e9-0b89fa8b1d72.jpg",
  "width": 2048,
}

file = {
  ...file,
  type: mime.getType(file.uri),
  name: file.uri.split('/').pop()
}

[sz3lbi]

Hello,
I have the same issue as described. After sending the axios POST, I receive the response:

{"detail":[{"loc":["body","file"],"msg":"Expected UploadFile, received: <class 'str'>","type":"value_error"}]}

I applied the solution provided here and my Blob object has the name field included. The problem is that it unfortunately did not solve the issue in my case.

Working curl request (through Swagger UI):

curl -X 'POST' \
  'http://localhost:8000/images' \
  -H 'accept: application/json' \
  -H 'content-length: 3099363' \
  -H 'Authorization: Bearer xxx' \
  -H 'Content-Type: multipart/form-data' \
  -F 'classified_id=2' \
  -F 'file=@Screenshot_2019-10-16-18-04-03.png;type=image/png'

My axios request headers:

POST /images HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: application/json, text/plain, */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Authorization: bearer xxx
Content-Type: multipart/form-data; boundary=---------------------------41197619542060894471320873154
Content-Length: 305
Origin: http://localhost:3000
DNT: 1
Connection: keep-alive
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1

axios request function (generated by Orval):

/**
 * @summary Create Image
 */
export const createImage = (
  bodyCreateImageImagesPost: BodyCreateImageImagesPost,
  options?: AxiosRequestConfig
): Promise<AxiosResponse<Image>> => {
  const formData = new FormData();
  formData.append(
    "classified_id",
    bodyCreateImageImagesPost.classified_id.toString()
  );
  formData.append("file", bodyCreateImageImagesPost.file);

  return axios.post(`/images`, formData, options);
};

Request data object:

{
  "classified_id": 2,
  "file": {
    "rawFile": {},
    "src": "blob:http://localhost:3000/9826efb4-875d-42f9-9554-49a6b13204be",
    "name": "Screenshot_2019-10-16-18-04-03.png"
  }
}

(when the src parameter is named uri or the name field contains last part of the src param as the filename, nothing changes)

FastAPI endpoint:

def create_image(
    classified_id: int = Form(...),
    file: UploadFile = File(...),
    db: Session = Depends(get_db),
    user: User = Security(manager, scopes=["images_create"]),
) -> Any:
    # ...

I use the react-admin framework as my front-end in this case if it matters.
Any ideas what is wrong in here? Maybe @tamis-laan you can see something I don't as you had similar issue?
Thanks in advance.

[tamis-laan]

Uhm I think there are two ways of sending files. The first you can send a Blob or a Buffer object. The second you can send a file that is located on disk. In my case I'm sending a file on disk and I need to supply the name of the file. That's why in my case it wasn't working.

In your case, sending a Blob I'm not sure what and if more information is required.