For some reason this works fine in postman when i manually select a file from my PC to upload, but when i try to run in production off webform on my website i get a 400 response with the message "You have to specify either source or file form data field."

What is wrong with this code? This is verbatim from the postman "code" menu and should mirror the successful request i can fire from postman.

//Front end

<input type="file" id="physical" name="physical" value="" placeholder="Click or drag a file to this area to upload." data-size="20">

//Back end

var physicalUpload = document.getElementById("physical").files[0];     
headers = {'Authorization': 'API-Key xxxxxxxxxxx','Content-Type': 'multipart/form-data'};
    
    //Create attachment
    var formdata = new FormData();
    formdata.append("file",physicalUpload);
  
  var requestOptions = {
  method: 'POST',
  headers: headers,
  body: formdata,
  redirect: 'follow'
  };
  
  
  let response = await fetch("https://api.xxxxxxx.com/public/v1/documents/"+docID+"/attachments/", requestOptions)
  .then(response => response.text())
  .then(result => {

    const obj = JSON.parse(result);
    console.log("attachmentID: "+obj.id);
    console.log("uuid: "+obj.uuid);
    

  })
  .catch(error => console.log('error', error));
  this.response = response;
  console.log("Response: "+this.response);
  
  return response;