[SOLVED] Fetch API uploads corrupted Excel files to Dropbox

Fetch API uploads corrupted Excel files to Dropbox

I'm using a Dropbox SDK JS ("dropbox": "^10.10.0") to upload files via filesGetTemporaryUploadLink, this method returns a temporal URL for file uploading.

The way I upload a file:

const fileUploadResult = await fetch(uploadDestination.url, {
    body: fileData,
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
        "Content-Type": "application/octet-stream"
    },
    method: "POST",
    mode: "cors"
});

When I upload PDFs, everything is working OK, but when I try to upload .xlsx file, this file is uploaded in a corrupted way.

I've tried to play with Content-Type, but when I change application/octet-stream to Excel's MIME (application/vnd.openxmlformats-officedocument.spreadsheetml.sheet) or to binar/octet-stream, I get the error:

Failed to load resource: the server responded with a status of 400 (Bad Request)

That's quite strange, what's the difference between sending PDFs and Excel files via POST with Fetch API?

Solution

As @Greg mentioned, the problem was by unnecessary wrapping a file by FormData, once I've removed this wrapping, everything is working correctly:

const fileData = domRef.files[0];

const fileUploadResult = await fetch(uploadDestination.url, {
    body: fileData,
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
        "Content-Type": "application/octet-stream"
    },
    method: "POST",
    mode: "cors"
});