yikegaya’s blog

仕事関連(Webエンジニア)と資産運用について書いてます

<input type="file" accept="image/*">タグでAndroidの写真を扱うとエラーになる場合がある

HTMLで画像のみ受け付けるフォームを以下のように作って検証していたらAndroid端末でエラーが出るようになった。

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

スマホ端末だと上記のタグをつけた場合に保存されている写真をアップロードするのではなくカメラアプリを起動させて撮影した写真をそのまま送信できるんだけど、そうするとHuaweiAndroidでエラーが発生した。

で、調べたら対象の写真がHEIC形式(HEIF形式)でHTMLの"accept=image"がHEIC形式に対応していないのでエラーになっていたっぽい。

iPhoneで撮影した写真もHEICだけどiPhoneの場合はinputタグからアップロードする場合JPEGに勝手に変換してくれているらしい。自分はiPhoneユーザなのでここで差分があって気づかんかった。

対応

今回は上記のフォームから写真をバックエンドにpostしてからS3に送信したかったんだけど機能要件的にaccept="image"を外してサーバサイドでバリデーションかければいいよね。というかよく考えたら写真以外も扱える機能にしてもいいじゃん。という話になったけど、これ気づきにくいな。検証者がiPhoneユーザしかいないと辛い