getParameter returning NULL and getPart not recognised, the request doesn't contain a multipart/form-data or multipart/mixed stream

Question

I have two problems. My servlet was initially working where I have a HTML page which allows the users to enter their name and upload 2 files. However, after a colleague of mine added some JS codes, the entire page seems to break

Problem 1: Chief Engineer and Barge Officer returns null despite entering values.

Problem 2: signatureFilePartCE throws the error request doesn't contain a multipart/form-data. S.O.P after that line doesn't appear as well

I've tried adding @MultipartConfig to my servlet. On the front end, I tried adjust the JS code to add enctype: 'multipart/form-data', and contentType: false but to no avail.

Servlet

String chiefEngineerName = request.getParameter("chiefName");
String bargeOfficerName = request.getParameter("bargeName");

if (chiefEngineerName != null) {
  boolean check = ExternalUserDAO.checkIfExternalUserRecordExist(jobRefNo, chiefEngineerName);
  System.out.println("Check is: " + check);
  if (!check) {
    chiefEngineer = new ExternalUser(jobRefNo, chiefEngineerName, null, null, "Chief Engineer");
    ExternalUserDAO.insertExternalUser(chiefEngineer);
  }
}
System.out.println("Chief Engineer is: " + chiefEngineerName);
System.out.println("Barge Officer is: " + bargeOfficerName);
Part signatureFilePartForCE = null;

//Retrieving filePart using JS?
try {
  signatureFilePartForCE = request.getPart("chiefSign");
  System.out.println("Hello");
} catch(Exception e) {
  System.out.println(e.getMessage());
}

JS

$("form").submit(function(e) {
  e.preventDefault();

  $.ajax({
    type: "POST",
    //url: domain + '/The_Sailors_Application/UploadExternalUserInfoServlet?referenceNumber' + referenceNo,
    url: domain + '/The_Sailors_Application/TestingServlet?referenceNumber' + referenceNo,
    //data: $(this).serialize(),
    enctype: 'multipart/form-data',
    //contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    //contentType: false,
    success: function() {
      // callback code here
      $('#errorMessageBox').css("display", "block");
      displayErrorMessage("success", "The changes made to this form had been saved.");
      $(window).scrollTop(0);
      //window.location.href = "timelog.html?referenceNo=" + referenceNo;
    },
    error: function(error) {
      $('#errorMessageBox').css("display", "block");
      displayErrorMessage("danger", "The changes made to this form had failed to be saved. Please try again.");
      $(window).scrollTop(0);
    }

  })
});

HTML

<form method="POST" class="form-horizontal" enctype='multipart/form-data'>
  <tbody>
    <tr>
      <td><input type="text" id="chiefName" name="" pattern="[A-Za-z]{1,50}" title="Only letters are allowed." onchange="chiefEngineerName(this);" placeholder="" class="form-control"><span id="cError" class="help-block"></span></td>
      <td>
        <input type="file" name="chiefSign" accept="image/*" onchange="chiefEngineerSign(this), readURL2(this);
                                                                        capture = camera"><br><br>
        <div id="chiefSign"> <img id="displayImg2" height="100" width="100" /></div>
      </td>
      <td>
        <input type="file" name="chiefStamp" accept="image/*" onchange="chiefEngineerStamp(this), readURL3(this);
                                                                        capture = camera"><br><br>
        <div id="chiefStamp"> <img id="displayImg3" height="100" width="100" /></div>
      </td>
    </tr>
  </tbody>
  <input type="submit" class="btn btn-primary" value="Save">
</form>