Fastapi Upload a Image

Question

i try to upload a image to a fastapi from a Cordova Webapp and get the following error:

{"detail":[{"loc":["body","terms"],"msg":"field required","type":"value_error.missing"},{"loc":["body","privacy"],"msg":"field required","type":"value_error.missing"}]}

INFO:     192.168.1.129:51915 - "POST /upload/ HTTP/1.1" 422 Unprocessable Entity

My FastApi Code is:

@app.post("/upload/", dependencies=[Depends(valid_content_length)])
async def create_upload_file(file: bytes = File(...), terms: str = Form(...), privacy: str = Form(...)):
    allowedFiles = {"image/jpeg", "image/png", "image/gif", "image/tiff", "image/bmp", "video/webm"}
    if file.content_type in allowedFiles:
        filename = str(uuid.uuid4())
        with open("uploaded_images" + filename + file.filename, "wb") as buffer:
            shutil.copyfileobj(file.file, buffer)
        return {"filename": file.filename}
    else:
        return "miau"

Client Code:

<form method="post" action="http://192.168.1.129:8080/upload">

                <div class="form_row">
                    <label for="myfile">Choose your image:</label>
                    <input type="file" id="myfile" name="file">
                </div>
                <div class="form_row">

                        <label>Accept:</label>
                        <label class="label-checkbox item-content">
                            <input type="checkbox" name="my-checkbox" value="privacy" required>
                            <div class="item-media">
                                <i class="icon icon-form-checkbox"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title"><a src="" target="_blank">Privacy Policy</a></div>
                            </div>
                        </label>

                        <label class="label-checkbox item-content">
                            <input type="checkbox" name="my-checkbox" value="terms" required>
                            <div class="item-media">
                                <i class="icon icon-form-checkbox"></i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title">Terms of Use</div>
                            </div>
                        </label>
                        <label class="label-checkbox item-content">
                            <input type="submit" name="submit" class="form_submit" id="submit" value="Send"/>
                        </label>
                </div>
            </form>

How to solve the problem? According to error the body is empty, but I don't know what the problem is.

Thanks:)

Answer 1

The error says pretty much everything

"loc":["body","terms"],"msg":"field required"

and

"loc":["body","privacy"],"msg":"field required"

This means that your form is not submitting the terms and the privacy fields.

If you look at your HTML code, you can see that both of the inputs have the name my-checkbox , while fastapi route expects two parameters: privacy and terms .

Change the names of the inputs to match the two parameters