Javascript – File upload to flask API with fetch API – request.files is empty

I have been trying to upload files to a Flask API with the javascript fetch API.

I am forming the request like this:

    let file = new FormData();
    let imageFile = document.getElementById("select-image").files[0];
    file.append("file", imageFile);
    fetch('http://localhost:5000/image-file',
      {
        method: 'PUT',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': token
        },
        body: file
      })
      .then(async http => {
        let response = http.text();
        if (http.ok) {
          console.log("created")
          postImageData(text);
        }
        else {
          return response.then(response => {throw new Error(response);})
        }
      })
      .catch(error => {
        console.log(error);
      })

but when I do request.files in flask, the object is empty, and request.files["file"] returns an error.

Inspecting the request, the payload looks like this:

------WebKitFormBoundaryG7nrDvgPSk3FSRUs
Content-Disposition: form-data; name="file"; filename="2480_books2.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryG7nrDvgPSk3FSRUs--

My file upload element looks like this:

<input id="select-image" name="image" type="file"/><br/>

Can I access the file from the request as it is, or is there a problem with the request itself?