How do I attach files when using AJAX to submit a form?

[sunscreem]

I've a file upload field called gotABriefOrRfpUploadItHere.

My AJAX form submission is working great, except that the files I'm attaching to the payload are being ignored.

I'm pretty sure this is because I'm not attaching them correctly

(Code below is pretty much the boilerplate from https://docs.solspace.com/craft/freeform/v4/guides/using-vue-js.html#using-vue-js)

const form = evt.target;
const data = new FormData(form);
const request = new XMLHttpRequest();

 // Add Honeypot field
data.append("freeform_form_handle", "digitalForm");

// Add action which handles freeform validation
data.append("action", "freeform/submit");

// Add the form's payload (when using Encrypted Payload)
data.append("freeform_payload", payload.value.value);

/ Add the form's hash, so that it gets recognized by the form service
data.append("formHash", hash.value.value);

// Add the CSRF token if it's enabled for the site
data.append(window.csrfTokenName, window.csrfTokenValue);

data.append("firstName", firstName.value);
data.append("lastName", lastName.value);
      
files = document.getElementById('fileInput').files;
data.append("gotABriefOrRfpUploadItHere", files[0]);

In chrome I can see the payload as:

Would appreciate any help on this.