Send custom ajax data object from pseudo form (div) within form

Question

I have a sign-up form, I am wanting to add a file upload mid way through the process. Meaning I have to have the upload process behave differently to the sign-up form, however, I am having issues posting custom data fields (namely the FILES input) through to the ajax handler.

<div class="doc_upload_area">
  <input type="hidden" name="propertyId" value="<? echo $tempPropertyId; ?>" />
  <div class="input-group">
    <input type="file" class="form-control file_upload" name="the_file" aria-label="Upload">
    <select required class="form-select document_id" name="document_type" >
      <option value="">Tell us what your uploading</option>
      <option value="document">Document</option>
      <option value="brochure">Brochure</option>      
    </select>
    <button class="btn btn-outline-secondary doc_upload" type="submit">Upload</button>
  </div>
</div>

Here is the main part of the jQuery in question, as you can see I have attempted to serialise the div, I only have two fields I need to pass into the data to send across to the handler...

$(".doc_upload").on('click',(function(e) {
   var x = $(".doc_upload_area").serializeArray();
   e.preventDefault();
   $.ajax({
      url: "../document_upload.php",
      type: "POST",
      data:  x