はじめに

みなさんHTMLタグの一つであるinputタグはご存知だと思います。
その中でもtype="file"についてぼくはこんな疑問を持ちました。

選択したファイルはどこのファイル？コピーとかされているの？

これみなさん知っていますか？
ちょこっと調べたんですがなかなか情報がなかったので
いろいろ自分で調査してみました。

（本音は調査が面白そうだったのでそんなに本気で調べてないだけです

仮説を立てる

まずは仮説をいくつか立ててそれぞれを検証していきます

A. ブラウザはファイル参照だけ持っている
B. ファイル選択時にTemp領域へコピーしている
C. メモリ上に抱えている

たぶんこれらのどれかじゃないかなと思っており、
個人的にはBが濃厚だと勝手に考えています。

調査開始

ファイルアップロード機能が必要なので
簡単にファイルをアップロードするだけのアプリを自前で作りました。
https://github.com/taqm/go-simple-fileup

これは・・・雑の極みっ・・・！
気にせずこれで検証を行っていきましょう

A. ブラウザはファイル参照だけ持っている 説

まずはこちら検証していきましょう

説の内容

• ブラウザはアップロード対象ファイルへの参照だけを保持
• ファイルをアップロードする際は実際のファイルがそのまま送信される

こんなところでしょうか

検証内容

もしブラウザがファイルへの参照を持っているだけならば、
ファイル選択後にファイルを更新したときに更新後のファイルが送信されるはず！

作った検証用アプリを使って検証してみます

まずは適当なテキストファイルを用意します。

hoge

そしてこのファイルを選択後に更新してから送信してみます。

fuga

結果

送信されたファイルの中身は以下でした

fuga

更新されてる...
あれー？
一番ないと思っていた仮説だったのにいきなりヒット？

では更新だけでなくファイル選択後に、対象ファイルを削除してみましょう

なんと！リクエストに失敗してしまいました。

やはりただファイル参照を持っているだけで
実際のファイルへの更新を行うと、選択しているファイルにも影響が起きるようです。

ブラウザごとの挙動

こういう問題はブラウザごとに違うのでは？という疑問が出てきます。
先に述べた実証はChromeで行っていたため
他のブラウザではどうなっているのか見てみましょう

Safari

選択後に、更新した場合
やはり送信されたファイルは更新後の内容になっていました。
Chromeと同じ動きです。

選択後に、削除した場合
削除後に送信した結果、
同名の空ファイルが送信されてしまいました。

Firefox

選択後に、更新した場合
送信されたファイルは更新後の内容になっていました。
ChromeやSafariと同じ動きです。

選択後に、削除した場合
ファイルの送信が行われませんでした。
そもそもファイルが選択されていないような動きになっています。

Microsoft Edge

選択後に、更新した場合
なんと同名の空ファイルが送信されてしまいました。

選択後に、削除した場合
削除の場合も、更新と同様に空ファイルが送信されています。

Internet Exproler 11

選択後に、更新した場合
ChromeやSafari同様に更新後の内容が送信されました。

選択後に、削除した場合
なんと削除前のファイルが正常に送信されるではありませんか。
そして

選択　→　更新　→　削除　→　送信

と操作を行った場合には更新されたファイルが送信されていました。

ブラウザ別の挙動まとめ

ブラウザごとに送信されたファイルをまとめてみます。

バラバラだ

結論

input(type=file)でファイルを選択した場合は
ファイルのへの参照を持っているだけであり、
選択後にファイルを更新・削除を行うと選択したファイルへ反映される。

ただし、反映のされ方はブラウザごとに挙動が異なる。

あとがき

正直ファイルの参照を持っているだけだとは思っていませんでした。
改めて考えてみると、コピーなんてしていたら容量も時間もかかるのでありえないんですが・・・ｗ

でもまあ調査した結果としてはとても面白い内容となったので満足感ありです！
まだIEの細かな仕様やスマホだとどうなのかなど色々気になることもあるので
時間ができたら記事を更新していきます！

追記　

2018/12/25時点での検証結果になるため、ブラウザの更新により挙動が変更される可能性があります。

おしまい