Androidの input type="file" accept="image/*" 事情

kimizuka.hatenablog.com

こちらの問題 につづいてもうひとつ問題にぶつかりました。

やりたかったこと

1. Androidからローカルの画像ファイルをアップロードするフォームをつくりたい
2. できれば、画像以外のファイルは上がらないようにしたい
3. さらにできればjpgとpngしか上がらないようにしたい
4. さらにさらにできればその場でカメラで撮影した画像もアップロードできるようにしたい

結果

一部Andoridで4ができていないと言われ調査をはじめました。
手元にあったAndroidで確認したところ、Android4.4.2のXperiaのChromeで再現しました。

現象

<input type="file" accept="image/*" />

だと、1、2を満たせるが3、4を満たせない。
（iPhoneでは1、2、4を満たせる）

---

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

だと、1しか満たせない。（カメラも立ち上げられるがなぜかビデオしか撮れない）
（iPhoneでは1、2、3、4、すべて満たせる）

---

<input type="file" accept="image/*" capture />

だと、4しか満たせない。
（iPhoneでは1、2、3、4、すべて満たせる）

---

Android4.4.2でも再現する機種としない機種があるのが謎で、Chromeのバージョンに依存するバグなのか、機種依存のバグなんだと判断しました。

結論

もろもろ検討した結果、今回は、

<input type="file" accept="image/*" />

を採用し、カメラでの撮影を諦めました。

<div>
  <p><input type="file" accept="image/*" /></p>
  <p>ローカルファイルをアップロード</p>
</div>
<div>
  <p><input type="file" accept="image/*" capture /></p>
  <p>カメラで撮影してアップロード</p>
</div>

という感じで、
Andoridとバージョンで分岐して、ローカルアップロードとカメラアップロードのボタンを分けることも検討しましたが、発生条件が謎だったので諦めました。