読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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とバージョンで分岐して、ローカルアップロードとカメラアップロードのボタンを分けることも検討しましたが、発生条件が謎だったので諦めました。