accept属性を指定したとき、ファイル選択ダイアログの挙動が、ブラウザごとに異なる


`<input type="file" >`のaccpet属性に対する挙動が、ブラウザごとに異なるので、まとめました。
早く統一されてほしい。。。

# 環境
* Firefox 60.0.2 (64 ビット)
* Google Chrome 67.0.3396.87（Official Build） （64 ビット）
* Internet Explorer 11 (11.112.17134.0)
* Microsoft Edge 42.17134.1.0


# accept属性について



>type 属性の値が file である場合、この属性はサーバーが受け入れるファイルの種類を示します、それ以外の場合は無視されます。値はコンテンツの種類を定義する次の値をコンマで区切ったリストでなければなりません。
>
>ピリオド (U+002E) で始まるファイルの拡張子 (例: .jpg, .png, .doc).
拡張子を持たない有効な MIME タイプ。
audio/* は音声ファイルを表します。 HTML5
video/* は動画ファイルを表します。 HTML5
image/* は画像ファイルを表します。 HTML5

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#attr-accept 引用
https://www.w3.org/TR/html5/forms.html#attr-input-accept 参考


# ブラウザの挙動を確認

<p data-height="465" data-theme-id="0" data-slug-hash="BVxBWR" data-default-tab="html,result" data-user="yuji38kwmt" data-embed-version="2" data-pen-title="accept属性にさまざまな値を指定する" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/BVxBWR/">accept属性にさまざまな値を指定する</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### 確認方法
Firefox, Chromeで確認しました。
「参照」ボタンを押したとき、「ファイル選択の種類」がaccept属性で指定した値ならば、「〇」、そうでなければ「×」という結果にしました。

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/25961a36-47a8-a2b8-af1c-67203d809cc3.png)


### 1個のMIMEタイプを指定

```html
  <div>image/png : <input type="file"  accept="image/png"></div>
  <div>text/csv : <input type="file"  accept="text/csv"></div>
  <div>	application/zip : <input type="file"  accept="application/zip"></div>
  <div>	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet : <input type="file"  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"></div>
```


| accept                                                            | Chrome | Firefox |
|-------------------------------------------------------------------|--------|---------|
| image/png                                                         | 〇     | 〇      |
| text/csv                                                          | ×      | 〇      |
| application/zip                                                   | 〇     | 〇      |
| application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | 〇     | 〇      |

### 1個の拡張子を指定

```html
  <div>.png : <input type="file"  accept=".png"></div>
  <div>.csv : <input type="file"  accept=".csv"></div>
  <div>.zip : <input type="file"  accept=".zip"></div>
  <div>.xlsx : <input type="file"  accept=".xlsx"></div>
```

| accept                                                            | Chrome | Firefox |
|-------------------------------------------------------------------|--------|---------|
| .png                                                              | 〇     | 〇      |
| .csv                                                              | 〇     | 〇      |
| .zip                                                              | 〇     | 〇      |
| .xlsx                                                             | 〇     | 〇      |

### 複数の値を指定

```html
<div>image/png, application/zip : <input type="file"  accept="image/png, application/zip"></div>
```  
  

| accept                                                            | Chrome | Firefox |
|-------------------------------------------------------------------|--------|---------|
| application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | ×     | 〇      |
| .png, .zip | ×     | 〇      |

# まとめ

* Chromeでは、ファイルの種類を複数指定できない
* Chromeでは、`text/csv`に対応していない

クロスブラウザテストでは、`accept`属性の部分を重点的にテストした方がよさそうですね。

https://www.mitsue.co.jp/knowledge/blog/frontend/201501/29_1856.html
https://www.w3.org/TR/html5/forms.html#attr-input-accept

# 補足

## HTML5の仕様では、MIMEタイプと拡張子の両方を指定することを推奨している

>Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.

https://www.w3.org/TR/html5/forms.html#attr-input-accept 引用

HTML5の仕様では推奨しているけど、Chromeのファイル選択ダイアログは対応していない。。。
（HTM5の仕様にはファイル選択ダイアログについて記載されていないので、対応されていなくてもHTML5の仕様上問題ありません）

## Edgeの場合
Edgeでは、accept属性にどんな値を指定しても、ファイルの種類には「すべてのファイル」が選択されています。
しかしIE11は対応されています。
ダウングレード？