Adapting a jQuery function to send files

Question

A function on our website fires for all of our forms. It uses jquery's serializearray method and works great.

I need to add a form with a file input, and serializearray doesn't handle files. I'm not new to Python and Django, but I am new to Jquery. And I'm having trouble adapting the function.

Since the formData class handles files, I thought I could change "data: serializedform" to "data: new formData(form)".

When I did that, Chrome's console displayed "Uncaught TypeError: Illegal invocation". Firefox's console displayed "Uncaught TypeError: 'append' called on an object that does not implement interface FormData."

Do I need to convert the FormData object to another type?

A snippet follows:

uploadfile.html:

function postAndLoad(form, url, panelDivID, btnName){
    var serializedForm = $(form).serializeArray(); 
    return request = $.ajax({
        url: url,
        dataType : 'html',
        cache: 'false',
        type : 'POST',
        data: serializedForm,  //data: new FormData(form) produces an error.
        success: function (data) {
            console.log("Completed POST");
        error: function(data) {
            console.log('There was a problem in postAndLoad()');
            console.log(data);
        }
    });
    return false;
    };
…
<form enctype="multipart/form-data" onsubmit="postAndLoad(this, '{% url 'UploadFile' %}', 'panel_upload'); return false;" method='post'>
    {% csrf_token %}
    {{ form | crispy}}
    <div class="row w-100">
        <input class="btn" type='submit' name="form1btn" value="button" />
    </div>
    </form>

forms.py:

class UploadFile(forms.Form):
    uploadFile = forms.FileField(label="Select file to upload")
    sampleText = forms.CharField(label="Enter some text")