Download an image PNG from backend API through frontend client

[maldevel]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched in the documentation/README.
• I already searched in Google "How to do X" and didn't find any information.
• I already read and followed all the tutorial in the docs/README and didn't find an answer.

Commit to Help

• I commit to help with one of those options 👆

Example Code

@router.post(
    "/quadrant/png",
    responses={
        200: {
            "content": {"image/png": {"schema": {"type": "string", "format": "binary"}}},
            "description": "PNG bytes",
        }
    },
    dependencies=[Depends(get_current_active_superuser)],
)
def quadrant_png(
    *,
    session: SessionDep,
    params: QuadrantFromDbParams = Body(default=QuadrantFromDbParams()),
) -> Any:
    labels, months, scores = _collect_data(session)

    df, colors = _quadrant_prepare(
        labels, months, scores, params.x_split, params.y_split, params.colors
    )

    data = _png_bytes(df, colors, params.x_split, params.y_split)
    
    return Response(
        content=data,
        media_type="image/png",
        headers={"Content-Disposition": 'attachment; filename="quadrant_scatter.png"'},
    )



 const mutation = useMutation({
   mutationFn: () =>
     ProjectsService.quadrantFromDbPng({ requestBody: { x_split: xSplit, y_split: ySplit } })as Promise<Blob>,
   onSuccess: (data) => {
     console.log(data);
     showSuccessToast("PNG generated successfully.")
   },
   onError: (err: ApiError) => {
     handleError(err)
   },
 })


export type ProjectsQuadrantFromDbPngResponse = ((Blob | File));
export type ProjectsQuadrantFromDbExcelData = {
    requestBody?: QuadrantFromDbParams;
};



    public static quadrantFromDbPng(data: ProjectsQuadrantFromDbPngData = {}): CancelablePromise<ProjectsQuadrantFromDbPngResponse> {
                return __request(OpenAPI, {
            method: 'POST',
            url: '/api/v1/quadrant/png',
            body: data.requestBody,
            mediaType: 'application/json',
            headers: { Accept: 'image/png' },
            responseHeader: 'Content-Disposition',
            errors: {
                422: 'Validation Error'
            }
        });        
    }

Description

Created a backend API. Everything works, the request returns a valid PNG image which I can access it, view it and download it through e.g. Postman.

I am trying to download this image from the API call directly to the user downloads when the user clicks a button. The API call is being called successfully, I can see the successful API call and the image returned through the web developers network tab. However, the downloaded image is not a valid PNG, downloaded from the openapi client the image has less bytes that the original one. I tried almost everything, decoding, etc. I tried to fix the client but without any success.

Changed also the openapi schema responses for the PNG download to this:

"responses": { "200": { "description": "PNG bytes", "content": { "image/png": { "schema": { "type": "string", "format": "binary" } } } },

Operating System

Windows

Operating System Details

Windows running docker desktop.

Python Version

3.10.18

Additional Context

No response