FileListにFileを追加したい

Question

Webページ上で、ファイルの選択をドラッグアンドドロップとクリックしての選択両方をできるようにしたいです。
ドラッグアンドドロップで選択した複数のファイルをFileList型のfiles変数に入れていますが、<input type="file">で選択したファイルをこのリストに追加したいです。
appendのようなメソッドが用意されていませんが、可能でしょうか？

Answer 1

FileListは、一度作成すると変更できません。

iOSやIE環境以外では、DataTransferを使って、FileListを新規作成することは可能です（Qiita）。

    const dt = new DataTransfer();
    dt.items.add(file); // 必要なだけ繰り返す
    const list = dt.files; // FileListが取れる

Answer 2

ファイルを保持するだけならFormDataでもよいかもしれませんね

Comments

[yambejp]

<input id="fileItem" type="file" multiple>
<input id="send" value="send" type="button">
<script>
const fd = new FormData();
const file = document.querySelector('#fileItem');
file.addEventListener('change',e=>{
[...file.files].reduce((x,y)=>(x.append("f[]",y),x),fd);
console.log(...fd);
});
document.querySelector('#send').addEventListener('click',e=>{
const url="send.php";
fetch(url,{method:"post",body:fd}).then(res=>res.text()).then(console.log);
});
</script>

//send.php
<?PHP
print_r($_FILES);

[otftrough]

たしかに！
最終的にFormDataに入れてfetchで送るので、それがいいですね！