7

File input give different Mimetype for the same file in chrome or firefox. I have a wav file that I want to upload, chrome says it is audio/wav and firefox detect audio/x-wav.

I know those two mimetype are very similar (x- stands for non-standard), but why are they handled differently in this case?

Here is a fiddle to illustrate this: https://jsfiddle.net/r9ae0zfd/. And here is the WAV file I used for this example: https://freesound.org/people/zagi2/sounds/391828/.

In the end the behavior that I would like is to take a .wav file from my computer (client) and send it by HTTP to my server as audio/wav regardless of the browser.

There's a subsequent question to this: how to harmonize this behavior?

Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
  • The fiddle uses a file that you want to *up*load? – Bergi Jul 18 '17 at 16:15
  • The x stands for e**X**perimental – Quentin Jul 18 '17 at 16:17
  • What version of Firefox? https://bugzilla.mozilla.org/show_bug.cgi?id=306471 was only recently closed. – Quentin Jul 18 '17 at 16:19
  • @Bergi yes (this 15 chars min policy is soooo relevent) – Ulysse BN Jul 18 '17 at 16:36
  • @Quentin thanks for the link, pretty related! Though I think my file where downloaded as `audio/wav`, not `audio/x-wav` (I tried on a bunch of different files from different sources). But in the end I still get `audio/x-wav` format from firefox. I use Firefox 54.0 – Ulysse BN Jul 18 '17 at 16:41
  • @UlysseBN What 15 chars min policy? – Bergi Jul 18 '17 at 17:00
  • Stack Overflow's 15 min chars for a comment, this is out of scope though – Ulysse BN Jul 18 '17 at 17:34
  • 2
    Why do you need this mimeType ? Browsers only check for extensions to set it, any file with extension `.wav` will have its `type` set to one of these. If you want to check if it's a real `audio/wav` file, then check for its magic number : `52 49 46 46`. (`let r = new FileReader(); r.onload = e => console.log(new DataView(r.result).getUint32(0).toString(16) === '52494646'); r.readAsArrayBuffer(file.slice(0,8));}`) – Kaiido Jul 20 '17 at 02:57
  • @Kaiido I send asis to my server that doesn't accept `x-wav`. My solution was to accept x-wav on back-end, but I still want to find out the difference and if there a way to harmonize it. You could make an answer about the magic number, I think it would be pretty appropriate! – Ulysse BN Jul 20 '17 at 14:46
  • Well no I don't think an answer made of this would be appropriate. Your question is "why is it different between chrome and FF ?" The current answer makes a good point explaining at least 60% of the problem. The other 40% are that there is no official (i.e IANA supported) mimeType for this extension. If you had written your question as the real question you want to be answered, it would be a duplicate of this one : https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload – Kaiido Jul 20 '17 at 14:54
  • 1
    And while I know the answer to your edit (simply change `console.log` to `if` and add `file = new Blob([file], 'audio/wav')` after the closing `)` in my first comment), I don't think it is correct to edit your question after someone (quite correctly) answered a previous version of it. – Kaiido Jul 20 '17 at 14:58
  • 1
    @Kaiido you're right and I think I'll accept this answer anyway. But there still was a misunderstanding (even without the edit) on this answer. So IMHO clarifying was mandatory. Anyway, his answer with your clarifying comments are both what I wanted so thank you! – Ulysse BN Jul 20 '17 at 15:01
  • 2
    ps: I had a typo : `file = new Blob([file], {type:'audio/wav'})` – Kaiido Jul 20 '17 at 15:04

1 Answers1

11

Its important to understand that when you've stored a file on disk, the mime type is not stored within that type. Thats why we have file extensions like .jpg or .wav. In the internet over HTTP we don't need them. We can have an URL http://example.com/foo.wav but send out a JPEG with the correct the JPEG mime type, and the browser will correcty render it as JPEG. It doesn't care about the file extension.

However if you are on your local file system the file extension is relevant. If you open a file called foo.wav your operating system decides by the extension .wav to open some audio player.

When selecting a file to upload it to the internet the bowser does a non-trivial task: It selects a mime type for the file extension. For this every browser has a mapping table, mapping known file extensions to mime types. Well, and here is the catch: this table obviously isn't identical on different browsers. So thats why you get different results in your fiddle.

Some browsers map .wav to audio/wav and some to audio/x-wav.

So if your test case is downloading a file with the mime type audio.wav and then inspecting its mime type with the fiddle you posted you don't check what mime type was sent by your server when you downloaded the file, but only what mime type is guessed for the file extension by your browser.

In both cases, if you sent out a file foo.wav with the mime type audio/wav or audio/x-wav the file on your disk will be identical, and it won't be possible later to know what was the mime type your server sent for the file.

The only thing your browser can do during download is to change the file extension. For example if you sent a file http://example.com/foo and it has audio/wav as a mime type the browser will probably rename it to foo.wav.

Lux
  • 17,835
  • 5
  • 43
  • 73
  • That's very interesting thank you !! Though I'm not downloading a file from my server to a client, but uploading from a client to my server. I'll try to edit my question to make it more clear. Basically I have a `.wav` on my computer (client) that I want to send as `audio/wav` to my server regardless of the browser. Is there a way to achieve that ? – Ulysse BN Jul 20 '17 at 14:50
  • Also do you have a link where you took information on this browser mapping difference somewhere ? – Ulysse BN Jul 20 '17 at 15:02
  • Well, if you're only uploading the case is much simple, but the answer stays. the browser maps the `.wav` to a mime type and obviously different browsers map it differently. Thats why they don't have the same mime type. However this is ok. Your mistake is that you expect the same mime type for the same file, however there is no reason to expect this. So I don't have a source because the question is wrong. You ask why they sent a different mime type, but there is no reason why it should be the same! – Lux Jul 20 '17 at 21:52
  • We need to review how this works https://addpipe.com/simple-web-audio-recorder-demo/ https://github.com/addpipe/simple-web-audio-recorder-demo – JRichardsz Jul 18 '22 at 03:36