flutter_file_pickerをwebで使うとbody直下に要素が生成される

https://github.com/miguelpruivo/flutter_file_picker/blob/74289af412c2e090bde914c45cbbc54479d075a2/lib/src/file_picker_web.dart#L28-L38

FileUploadInputElementをそのまま使う時は、 そんなことしなくてもアップロードは成功する。

何のために必要なのだろうか？

blameするとこんなコミットを発見

https://github.com/miguelpruivo/flutter_file_picker/commit/ba19a7eccfac06e3e839f869063dbbe53cc287c9

mobileのSafari対応っぽい

https://github.com/miguelpruivo/flutter_file_picker/pull/380

To receive onChange event on the iPhone, we need to add Input element to the page body.

そうなのか。。。

それなら、タグを隠す方法はないのか？

querySelectorで無理矢理隠してみる

隠れはしたけど、結局dart:htmlを使っちゃってる

file_pickerが勝手に生成するタグを非表示にする · na8esin/flutter_file_picker_sample@172ccdc · GitHub

image_pickerの方も見てみる

非表示にしている様子はない https://github.com/flutter/plugins/blob/67bdfcb5b6f49286dcc17a58107ddd1ab2b20472/packages/image_picker/image_picker_for_web/lib/image_picker_for_web.dart#L160

簡単なサンプル作って動かして見たけど、やっぱり出たまんま

image_pickerでもやっぱりinputタグが隠されもせず表示される · na8esin/flutter_file_picker_sample@09445d8 · GitHub

最後に発見したのがfile_selector

pub.dev

まだwebにしか対応してないが、flutter/pluginsなのできっとやってくれるはず

こちらはちゃんとElementをremoveしている様子

https://github.com/flutter/plugins/blob/67bdfcb5b6f49286dcc17a58107ddd1ab2b20472/packages/file_selector/file_selector_web/lib/src/dom_helper.dart#L40

サンプルで動かしてみたけど、input fileは表示されなかった。 でも時々ちらっと表示される。