🦦

Webview <input type="file">の挙動[flutter,andorid,ios]

2022/05/13に公開

アプリの機能で一部webviewを利用する機会があり、その際にtelとかmailやpdf、外部URLはブラウザへ以外の対応でちょっと困ったことがあったのでご紹介します。

自身はflutterでinappwebviewを利用。

<input type="file">には画像だけ挿入したい!※ここでお気づきの方もいらっしゃるかと!

下記の処理は既に対応済み。

HTML入力用にカメラを有効にする
https://inappwebview.dev/docs/enable-camera-for-html-inputs/

・首題にある件でwebviewで下記をタップした場合

<input type="file">

‥勝手に出てこないで下さい。。

ということで1時間ぐらいAndroidManifest.xmlやInfo.plistの設定かなって悩んでいたんですけど、

【原因】
HTMLの記述でした。

Change upload options for <input type="file" accept="image/*"> in website when viewed from an android device
https://stackoverflow.com/questions/66597621/change-upload-options-for-input-type-file-accept-image-in-website-when-v

web側対応したら

出来ました。

accept属性
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/accept
http://html5.cyberlab.info/elements/forms/input-accept.html

2022/5月 沖縄は梅雨真っ只中です。
以上誰かのお役に立てれば幸いです!

Discussion