Ajax how to pass file from input type=file and accept in php?

Question

AJAX

There is a form in which there are 3 fields: Name, Email, attached file
Here is Ajax that sends data to php:

$(document).on('submit', '#form-job-modal-wrapper', function (e) {
        var form = $(this);
        var form_data = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: 'action_ajax_form.php',
            data: form_data,
            success: (data) => {
                $('#jobModal').html(data);
                $( window ).resize();
            }
        });

        e.preventDefault();
    })

The Name and Email fields are passed, but the "file" field is missing. I've tried a lot on google, but I still can't figure it out.
Layout:

<form class="job-modal__form is-form" id="form-job-modal-wrapper" action="action_ajax_form.php">
    <div class="job-modal__form-title">Apply for this job</div>
    <div class="is-columns gap-20">
        <div class="col">
            <div class="is-form-field is-form__field state-inited">
                <label class="is-form__field-box">
                    <span class="is-form__label">Name</span>
                    <input name="form_user_name" id="user_name" type="text" autocomplete="off"
                           onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your name'"
                           placeholder="Your name" class="is-input _field-inited"
                           data-validation="{&quot;mask&quot;:&quot;text&quot;,&quot;require&quot;:false,&quot;visible&quot;:true,&quot;error&quot;:&quot;required field&quot;}">
                </label>
                <div class="ff-error-parent">required field</div>
            </div>
        </div>
        <div class="col">
            <div class="is-form-field is-form__field state-inited">
                <label class="is-form__field-box">
                    <span class="is-form__label">E-mail</span>
                    <input name="form_user_email" id="user_email" type="text" autocomplete="off"
                           onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your e-mail'"
                           placeholder="Your e-mail" class="is-input _field-inited"
                           data-validation="{&quot;mask&quot;:&quot;email&quot;,&quot;require&quot;:true,&quot;visible&quot;:true,&quot;error&quot;:&quot;Enter a valid e-mail&quot;}">
                </label>
                <div class="ff-error-parent">Enter a valid e-mail</div>
            </div>
        </div>
    </div>
    <div class="file-uploader">
        <div class="file-uploader__label">Cover Letter (PDF or DOC)*</div>
        <div class="file-uploader-inner">
            <div class="js-drop-upload">
                <div class="ajax-upload-dragdrop" style="vertical-align: top; width: 400px;">
                    <div class="ajax-file-upload" style="position: relative; overflow: hidden; cursor: default;">
                        Upload a file
                        <form method="POST" action="upload.php" enctype="multipart/form-data"
                              style="margin: 0px; padding: 0px;"><input type="file"
                                                                        name="myfile"
                                                                        accept=".pdf, application/msword, .doc, .docx"
                                                                        style="position: absolute; cursor: pointer; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 100; opacity: 0;">
                        </form>
                    </div>
                    <span>or drag and drop here</span></div>
                <div></div>
            </div>
            <div class="ajax-file-upload-container"></div>
        </div>
    </div>
    <div class="is-form__submit">
        <button type="submit" class="button button--primary button--fill" id="button-submit-js-job-vacancy">
            <span class="button__gradient"></span>
            <span class="button__text">submit</span>
        </button>
    </div>
</form>

Answer 1

Submit the form itself, not the serialized data. Example:

$(document).on('submit', '#form-job-modal-wrapper', function (e) {
        $.ajax({
            type: 'POST',
            url: 'action_ajax_form.php',
            data: new FormData(this),
            success: (data) => {
                $('#jobModal').html(data);
                $( window ).resize();
            }
        });

        e.preventDefault();
});