There seems to be a difference between MIME types on macOS and Windows when using FormData for file uploads.
Windows users are complaining that the file upload doesn’t work and the validation error that comes back is:
“Validation failed (current file type is application/octet-stream, expected type is text/tab-separated-values)”
I’m scratching my head because when I check MDN it seems like the FormData API should be compatible with all browsers, but it’s not behaving the same across operating systems.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
There’s clearly a difference in the Content-Type
Edge macOS
------WebKitFormBoundary3WUJCpBdz1ohAJza
Content-Disposition: form-data; name="transactions"; filename="testdata.tsv"
Content-Type: text/tab-separated-values
------WebKitFormBoundary3WUJCpBdz1ohAJza--
Edge Windows:
------WebKitFormBoundaryACGjxE52TKrSKr1F
Content-Disposition: form-data; name="transactions"; filename="testdata.tsv"
Content-Type: application/octet-stream
------WebKitFormBoundaryACGjxE52TKrSKr1F--
I have an ugly fix, but I have no idea if I might be overlooking something?
const [file] = this.dropzone.files;
const formData = new FormData();
formData.append(
'file',
// FormData was sent as application/octet-stream from Windows devices so we need to convert it to text/tab-separated-values
new Blob([file], { type: 'text/tab-separated-values' }),
file.name,
);
This will have a huge impact on my workflow because I now have to assume that there is likely more mismatched behavior between Mac and Windows. How do I you deal with stuff like this? Do I have to start running my automated tests for different operating systems now?
For now I’ve built in monitoring for 400 Bad Request on my access logs so I can catch this kind of stuff earlier, but want to hear how other people deal with these kinds of problems.