[HTML5] ZipファイルのMIMEタイプがOSによって異なる件

最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。

<form>
  <input type="file" accept="image/jpeg,image/png">
</form>

PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept属性によって制限を付けると特定の環境でZipファイルが指定できない現象が発生し困ったことに。久しぶりにブラウザでZipファイルを扱ったので混乱したのですが、そういえば環境によってZipのMIMEタイプが違うのでした。

というわけで割と最近のOSとブラウザ毎にZipファイルのMIMEがどのようになっているか調査します。

検証用のコード

ボタンを押すとブラウザのコンソールにMIMEタイプを出力する簡単なファイルを用意しました。これを実行していきます。

<form>
  <input type="file" id="file">
  <button type="button" id="btn">チェック</button>
</form>

<script>
document.getElementById('file').addEventListener('click', function(){
  const file = document.getElementById('file').files[0]
  console.log(file.type)
})
</script>

検証結果

macOS

macOS Catalina 10.15.7で確認しています。

ブラウザ	Version	MIME Type
Google Chrome	98.0	application/zip
FireFox	97.0	application/zip
Safari	15.3	application/zip
Microsoft Edge	98.0	application/zip

Windows 10

Windows 10 Home(21H2)で確認しています。

ブラウザ	Version	MIME Type
Google Chrome	98.0	application/x-zip-compressed
FireFox	97.0	application/x-zip-compressed
Microsoft Edge	98.0	application/x-zip-compressed
Internet Explorer	11	application/x-zip-compressed

※FireFoxはPortable版を利用しました ※IEはいつの間にかブラウザのバージョン番号が確認できなくなってますね

まとめ

つまりPC環境でZipファイルだけを選択してもらいたい場合は、以下のように指定する必要があるということですね。

<form>
  <input type="file" accept="application/zip,application/x-zip-compressed">
</form>

ちなみにこのMIMEタイプはサーバへ送信する際も利用されますので、サーバ側でもチェックしている場合は同様に考慮する必要があります。

参考ページ

• よくある MIME タイプ - HTTP | MDN