[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で確認しています。

Windows 10

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

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

まとめ

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

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

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

参考ページ

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

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -