How to send both data from form that contain file with other data from AJAX to JSP/SERVLET

Question

I want to send data from form that contains file and other data to my Servlet by using AJAX

My form:

<form id="editDoc" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="usernameDocLabel" class="form-label">Username</label>
                        <input type="text" class="form-control" id="usernameDocLabel" value="" name="username" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="nameDocLabel" class="form-label">Name</label>
                        <input type="text" class="form-control" id="nameDocLabel" value="" name="name">
                    </div>
                    <div class="mb-3">
                        <label for="avatarDocLabel" class="form-label">Avatar</label>
                        <input type="file" class="form-control" id="avatarDocLabel" name="avatar">
                    </div>
                    <div class="mb-3">
                        <label for="emailDocLabel" class="form-label">Email</label>
                        <input type="email" class="form-control" id="emailDocLabel" value="" name="mail">
                    </div>
                    <div class="mb-3">
                        <label for="phoneDocLabel" class="form-label">Phone</label>
                        <input type="tel" class="form-control" id="phoneDocLabel" pattern="0{1}[0-9]{9}" value="" name="phone">
                    </div>
                    <label for="genderDocLabel" class="me-3">Gender:</label>
                    <div class="form-check form-check-inline mb-3 me-2" id="genderDocLabel">
                        <input class="form-check-input" type="radio" name="gender" id="maleDoc" value="0" checked>
                        <label class="form-check-label" for="maleDoc">
                            Male
                        </label>
                    </div>
                    <div class="form-check form-check-inline mb-3 me-2">
                        <input class="form-check-input" type="radio" name="gender" id="femaleDoc" value="1">
                        <label class="form-check-label" for="femaleDoc">
                            Female
                        </label>
                    </div>
                    <div class="form-check form-check-inline mb-3">
                        <input class="form-check-input" type="radio" name="gender" id="otherDoc" value="2">
                        <label class="form-check-label" for="otherDoc">
                            Other
                        </label>
                    </div>
                    <div class="mb-3">
                        <label for="addressDocLabel" class="form-label">Address</label>
                        <input type="text" class="form-control" id="addressDocLabel" value="" name="address">
                    </div>
                    <div class="mb-3">
                        <label for="dobDocLabel" class="form-label">DOB</label>
                        <input type="date" class="form-control" id="dobDocLabel" value="" name="dob">
                    </div>
                    <button type="submit" class="btn btn-primary">Save</button>
                </form>

My AJAX:

function editDoctor() {
        $('#editDoc').submit(function (e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);

            console.log(JSON.stringify(Object.fromEntries(formData)));
            

            Swal.fire({
                icon: 'question',
                title: 'Confirmation',
                text: 'Are you sure to update?',
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(result => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '../../manageDoctor',
                        type: 'POST',
                        data: {data : JSON.stringify(Object.fromEntries(formData)), type : 'edit'},
                        processData: false,
                        contentType: false
                    }).done(function (data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Edit Doctor',
                            text: 'Update Doctor successful',
                            timer: 1000,
                            timerProgressBar: true
                        });
                        setTimeout(function () {
                            loadData();
                        }, 1000);
                    })
                }
            })
        })
    };

My Java:

        String param = request.getParameter("data");
        System.out.println(param);

When I submit file and tried to log to console

            console.log(JSON.stringify(Object.fromEntries(formData)));

It display "avatar":{} without path or file name And my servlet get null

Is there anyway that I can get file submited from my form and other data by ajax? I expect that my data send to servlet can be look like:

data=formData&type="abc"

Thank you!