File Upload Using Fastapi and Ajax Returns Error 422

hi i write using fastapi to upload file and other text, when testing using swagger ui, response is ok, but when upload from html page it show 422 error.

I have installed multipart

testing with swaggerUi

response

Main.py

@app.post("/startSend")

async def startSend(
    chooseSender: str = Form(...), 
    message: str = Form(...), 
    delayStart: str = Form(...), 
    delayEnd: str = Form(...), 
    file: UploadFile = File(...)
    ):
    try:
        contents = await file.read()
        with open(file.filename, 'wb') as f:
            f.write(contents)
    except Exception:
        return {"message": "There was an error uploading the file"}
    finally:
        await file.close()
    
    return {"message": f"Successfuly uploaded {file.filename}"}

Html

function startSend(){
        var chooseSender = document.getElementById("chooseSender").value;
        var message = document.getElementById("message").value;
        var delayStart = document.getElementById("delayStart").value;
        var delayEnd = document.getElementById("delayEnd").value;
        var file = document.getElementById("file").value;
        var formData = new FormData();
        var endpoint = '/startSend';
        if (chooseSender == "Choose Sender") {
            swal("Oops...", "Sender Can't be empty!", "error");
        } else if (message == "") {
            swal("Oops...", "Message Can't be empty!", "error");
        } else if (file == "") {
            swal("Oops...", "Receiver File Can't be empty!", "error");
        } else if (delayStart == "") {
            swal("Oops...", "Delay Start Can't be empty!", "error");
        } else if (delayEnd == "") {
            swal("Oops...", "Delay End Can't be empty!", "error");
        } else {    
            formData.append('chooseSender', chooseSender);
            formData.append('message', message);
            formData.append('delayStart', delayStart);
            formData.append('delayEnd', delayEnd);
            formData.append('file', file);
            $.ajax({
                url: endpoint,
                type: 'POST',
                enctype: 'multipart/form-data',
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data.status);
                    if (data.status) { 
                        swal("Success!", data.message, "success");
                                                
                        
                        
                        

                        

                        
                    } else {

                        swal("Oops...", data.message, "error"); 
                    }
                }
            });  
        }
                        
    }

but after click start, it show

 POST  422 (Unprocessable Entity)

this is log from fastapi

DEBUG:multipart.multipart:Calling on_part_begin with no data
DEBUG:multipart.multipart:Calling on_header_field with data[42:61]
DEBUG:multipart.multipart:Calling on_header_value with data[63:93]
DEBUG:multipart.multipart:Calling on_header_end with no data
DEBUG:multipart.multipart:Calling on_headers_finished with no data
DEBUG:multipart.multipart:Calling on_part_data with data[97:108]
DEBUG:multipart.multipart:Calling on_part_end with no data
DEBUG:multipart.multipart:Calling on_part_begin with no data
DEBUG:multipart.multipart:Calling on_header_field with data[152:171]
DEBUG:multipart.multipart:Calling on_header_value with data[173:198]
DEBUG:multipart.multipart:Calling on_header_end with no data
DEBUG:multipart.multipart:Calling on_headers_finished with no data
DEBUG:multipart.multipart:Calling on_part_data with data[202:213]
DEBUG:multipart.multipart:Calling on_part_end with no data
DEBUG:multipart.multipart:Calling on_part_begin with no data
DEBUG:multipart.multipart:Calling on_header_field with data[257:276]
DEBUG:multipart.multipart:Calling on_header_value with data[278:306]
DEBUG:multipart.multipart:Calling on_header_end with no data
DEBUG:multipart.multipart:Calling on_headers_finished with no data
DEBUG:multipart.multipart:Calling on_part_data with data[310:312]
DEBUG:multipart.multipart:Calling on_part_end with no data
DEBUG:multipart.multipart:Calling on_part_begin with no data
DEBUG:multipart.multipart:Calling on_header_field with data[356:375]
DEBUG:multipart.multipart:Calling on_header_value with data[377:403]
DEBUG:multipart.multipart:Calling on_header_end with no data
DEBUG:multipart.multipart:Calling on_headers_finished with no data
DEBUG:multipart.multipart:Calling on_part_data with data[407:409]
DEBUG:multipart.multipart:Calling on_part_end with no data
DEBUG:multipart.multipart:Calling on_part_begin with no data
DEBUG:multipart.multipart:Calling on_header_field with data[453:472]
DEBUG:multipart.multipart:Calling on_header_value with data[474:496]
DEBUG:multipart.multipart:Calling on_header_end with no data
DEBUG:multipart.multipart:Calling on_headers_finished with no data
DEBUG:multipart.multipart:Calling on_part_data with data[500:528]
DEBUG:multipart.multipart:Calling on_part_end with no data
DEBUG:multipart.multipart:Calling on_end with no data

so my main.py should have no problem, but i think its in my html, that can't send data to endpoint. what to fix? thanks