<input type=”file”> – HTML： HyperText Markup Language ｜ MDN
input[type="file"]はファイルを選択する入力欄であり、ローカルのファイルを扱う都合上セキュリティが強いです。例えば JavaScript 上から選択されたファイルのローカルマシン中のパスを知ろうとするとC:\fakepath\ファイル名となります。またファイルが格納されているプロパティの型であるFileListクラスをインスタンスにしようとした場合Uncaught TypeError: Illegal constructorとエラーが起きます。このため value などの他プロパティの様にファイルを input 要素にセットしようとすると詰まりやすいです。これらは次の様にすることで回避できます。
// 文字列->Blob->File オブジェクトと加工
const csvStr = 'hoge,ふが,3列目';
const csvBlob = new Blob([csvStr], {type: 'text/plain'});
const csvFile = new File([csvBlob], 'ダミーファイル名.csv', {type: "text/plain"});
// File を DataTransfer に追加
// DataTransfer はドラッグ&ドロップ用のオブジェクト
// @see https://developer.mozilla.org/ja/docs/Web/API/DataTransfer
const dt = new DataTransfer();
// items.add で File を追加すると items に加えて files も増える
console.log(dt.items[0]);// undefined
console.log(dt.files[0]);// undefined
dt.items.add(csvFile);
console.log(dt.items[0]);// [object DataTransferItem]
console.log(dt.files[0]);// [object File]
// 自前 File の入った FileList である DataTransfer.files を代入してセット完了
document.querySelector('input#csvFile').files = dt.files;
DataTransfer が実質的なセッターを持つ FileList となっているため上記デモの様に input[type=”file”] を好き勝手できます。もちろんブラウザを持つマシンのローカルファイルシステムの中を探ることはできませんが、フォームの中身を維持するために使うなど色々できます。
