Fetch API uploads corrupted Excel files to Dropbox

Before you start Have you checked StackOverflow, previous issues, and Dropbox Developer Forums for help? Yes.

What is your question? 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?

Versions

• What version of the SDK are you using? "dropbox": "^10.10.0"
• What version of the language are you using? JS 2021
• Are you using Javascript or Typescript? JS
• What platform are you using? (if applicable) Node.js

[greg-db]

Thanks! By the way, regarding “And what data does it contain?”, I was actually referring to the corrupted version, in case the contents would serve as a hint as to the source of the issue.

Anyway, I see the fileData you’re passing in is an instance of FormData. That’s likely the issue here; you should only be passing up the raw bytes for the file. The Dropbox servers don’t expect this as form data (multipart or not). (This seems to be supported by the fact that the uploaded data is larger than expected. That is, there’s some additional data being added via the form type.)

You’ll need to update your code to send just the data for the file. I can’t offer help with OpenUI5 itself though, so you may need to refer to its documentation for information on directly accessing the file data.

[pubmikeb]

You’ll need to update your code to send just the data for the file.

Bingo! Sending just a file without wrapping by FormData solved the issue:

The final solution:

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"
});