Sending file to server API using fetch POST method

Question

I'm trying to send .xml file from my PC to a server, but im getting this error: POST https://localhost:44391/api/edit net::ERR_ABORTED 415

File state

const [file, setFile] = useState();

Input and button

 <input type="file" id="file" onChange={(e) => setFile(e.target.files[0])} />
 <button onClick={send}>DASD</button>

Onclick function

const send = async () => {
        if (file) {
            let formData = new FormData();
            formData.append('file', file);
            console.log(formData);
            await fetch("https://localhost:44391/api/edit", 
            { method: "POST", body: formData });
        }
    }

Answer 1

Remove the content type from the header, as the content type is not 'text/xml it should be multipart/form-data .

Fetch api will automatically add the header based on the content. Which will be something Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

const send = async () => {
  if (file) {
    let formData = new FormData();
    formData.append("file", file);
    console.log(formData);
    await fetch("https://localhost:44391/api/edit", {
      method: "POST",
      body: formData
    });
  }
};