<input type="file" accept="image/*">の挙動について
はじめに
ある案件にて、 <input type="file" accept="image/*" />
の画像アップロード機能の挙動が環境ごとに違い翻弄されたので備忘録も兼ねてまとめていきます。
やりたかったこととしては、どの環境でも画像アップロード用 input タグがクリックされた際にカメラかファイルアップロードの選択を行える形になっていることです。
OSごとの差
<input type="file" accept="image/*" />
を埋め込んだシンプルな html ファイルを作成し、各OSごとの動作確認をしていきます。
ちなみに netlify でホスティングを行いました。
Android14 の端末にて、Chrome での動作を見てみました。
画像アップロード用 input タグをクリックすると Android の機能である Photo Picker が起動します。
これにはカメラを開くオプションは提供されておらず、特定のメディアに対するアクセスを許可し画像を選択した上でファイルアップロードする流れとなります。
ios の場合は添付のようにカメラかファイルアップロードの選択が可能かと思います
Android と ios で挙動に差が出て困っていたところ qiita で以下の記事を見つけました。
どうやら Android14 からこの変更が入ったようです。
検証
上記の記事を参考に Android14 でもカメラかファイルアップロードの選択ができるようになるかの検証を行いました。
方法1:capture属性をaccept属性内に含める
<input id="input-2" type="file" accept="image/*;capture=camera" />
こちらの方法はうまくいきました
添付のようにカメラかファイルアップロードの選択が可能となりました
方法2:タグに capture="camera" を追加
そもそもこちらはカメラを起動させる設定のため意図した動きにはなりません。
”方法1:capture属性をaccept属性内に含める” この手法と取れば Android14 でも意図した挙動になりました
ブラウザによる差
上記の検証で一安心していたのですが、LINE内ブラウザだとさらに挙動が変わるようです
※ここまでの検証は Chrome で行っていました
Android14 の端末にて、作成した検証サイトをLINE内ブラウザで開き、「方法1」で実装したアップロードボタンをクリックすると添付のように複数種類のファイルを選択する機能が開かれました..
liffブラウザだと外部ブラウザで使える一部機能が使えない等の話はよく聞きますが、LINE内ブラウザでもこういった細かい挙動の違いは発生するようなので注意が必要ですね
LINE内ブラウザでも挙動を合わせることができるかはさらに調査を進めてみたいと思います。
おわりに
画像アップロード用 input タグひとつをとってもOSやブラウザごとに挙動が変わってくるのでフロントエンドの学習は本当に終わりがないですね。
こうした試行錯誤の中で得た知識や経験を、柔軟で堅実なコードを書ける力につなげられるよう頑張りたいです。
Discussion