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 :)

score 5 · Answer 1 · answered Mar 28 '21 at 20:27

5

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

answered Mar 28 '21 at 20:27

lsabi

3,641
1
14
26

Thank you. Played around a bit too much :D The upload works, but as soon as I switch to file: UploadFile = File(...) it comes: {"detail":[{"loc":["body", "file"], "msg": "Expected UploadFile, received: ", "type": "value_error"}]} – Nero Mar 28 '21 at 21:39
1

had to add enctype="multipart/form-data" to form – Nero Mar 28 '21 at 21:46

Fastapi Upload a Image

1 Answers1

Linked