GraphQL Image Upload Issue

[simon8889]

I'm working on a mini-project to learn GraphQL, using GraphQL, Strawberry, and FastAPI. I'm trying to upload an image using a mutation, but I'm getting the following error:

{
  "detail": "Missing boundary in multipart."
}

I searched for solutions, and ChatGPT suggested replacing the Content-Type header with:

multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

However, when I try that, I get another error:

Unable to parse the multipart body

I'm using Altair as my GraphQL client because GraphiQL does not support file uploads.

Here is my main.py:

from fastapi import FastAPI, status
from contextlib import asynccontextmanager
from fastapi.responses import JSONResponse
from app.database import init_db
from app.config import settings
from app.graphql.schema import schema
from strawberry.fastapi import GraphQLRouter
from app.graphql.query import Query
from app.graphql.mutation import Mutation

@asynccontextmanager
async def lifespan(app: FastAPI):
    init_db()
    yield

app: FastAPI = FastAPI(
    debug=settings.DEBUG,
    lifespan=lifespan
)

schema = strawberry.Schema(query=Query, mutation=Mutation)

graphql_app = GraphQLRouter(schema, multipart_uploads_enabled=True)

app.include_router(graphql_app, prefix="/graphql")

@app.get("/")
def health_check():
    return JSONResponse({"running": True}, status_code=status.HTTP_200_OK)

Here is my graphql/mutation.py:

import strawberry
from app.services.AnimalService import AnimalService
from app.services.ZooService import ZooService
from app.graphql.types import Zoo, Animal, ZooInput, AnimalInput
from app.models.animal import Animal as AnimalModel
from app.models.zoo import Zoo as ZooModel
from typing import Optional
from strawberry.file_uploads import Upload
from fastapi import HTTPException, status

@strawberry.type
class Mutation:
    @strawberry.mutation
    def add_zoo(self, zoo: ZooInput) -> Zoo:
        new_zoo: ZooModel = ZooModel(**zoo.__dict__)
        try:
            return ZooService.add_zoo(new_zoo)
        except:
            raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR)

    @strawberry.mutation
    def add_animal(self, animal: AnimalInput, file: Optional[Upload] = None) -> Animal:
        new_animal: AnimalModel = AnimalModel(**animal.__dict__)
        try:
            return AnimalService.add_animal(new_animal, file)
        except:
            raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR)

    delete_zoo: bool = strawberry.mutation(resolver=ZooService.delete_zoo)
    delete_animal: bool = strawberry.mutation(resolver=AnimalService.delete_animal)

I would really appreciate any help in understanding why the multipart upload isn't working. Any insights or fixes would be greatly appreciated!

[apoorva-01]

Your server side is fine. multipart_uploads_enabled=True is the bit everyone forgets and you already have it, so the fix is entirely on the client.

Both errors come from you setting the Content-Type header by hand. Drop it. The client generates multipart/form-data; boundary=...<random>... and then uses that same boundary string to separate the parts of the body. Set the header with no boundary and you get "Missing boundary in multipart". Paste in ----WebKitFormBoundary... and now the boundary in the header doesn't match the delimiters in the actual body, so you get "Unable to parse the multipart body". Let the client write that header itself and both go away.

Fastest way to prove the server works, plain curl:

curl localhost:8000/graphql \
  -F operations='{"query":"mutation($animal: AnimalInput!, $file: Upload){ addAnimal(animal:$animal, file:$file){ id } }","variables":{"animal":{},"file":null}}' \
  -F map='{"file":["variables.file"]}' \
  -F file=@image.png

-F makes curl build the multipart body and set the correct Content-Type + boundary for you. In Altair, use its own file-upload panel (Variables tab has an "add files" button) instead of editing headers by hand. It builds the operations/map request the same way.