jqueryのFileListのマージ

Question

現在、ドラッグ&ドロップでアップロード領域に画像をツッコミ、保存ボタンを押したら画像が保存される様なフォームを作成しているのですが、
その中で、１度画像を突っ込んだ後に再度画像を突っ込んだ際のFileListのマージのやり方がわかっておりません。

試したこと

        var old_files = $("#fileInput")[0].files;             //既に突っ込まれている画像を取得
        var new_files = e.originalEvent.dataTransfer.files;   //追加で突っ込む画像を取得
        var files = $.merge(old_files, new_files);　　　　　　 //FileListのマージ
        $("#fileInput")[0].files = files;　　　　　　　　　　　 //fileタグに設定

よろしければお知恵をお借りできますでしょうか、よろしくお願いいたします。

Comments

[Lhankor_Mhy]

ご提示のコードですと、具体的にはどのような問題が起きるのですか？

Answer 1

IEやiOSでは無理ですが、それ以外の最新ブラウザでは、DataTransferを経由して作成する方法があります（StackOverflow）。

const dT = new DataTransfer();
dT.items.add(file); // 必要な回数だけ繰り返す
input.files = dT.files;

Comments

[maisumakun]

追加はできないので、「両方に入っているFileListの中身を全部集めて、新しいFileListを作る」という形となります。

[match12]

教えていただいたやり方で実現することができました。
ありがとうございました！

Answer 2

FileList には追加する方法がないようなのでメモリ上に保持しておくのがいいでしょう。IE では設定すらできません。
https://developer.mozilla.org/ja/docs/Web/API/FileList