Как добавить в массив dataTransfer.files еще один файл?

Question

[MMMYIWW]

Здравствуйте! На данный момент у меня сделано так, что при перетаскивании картинки в textarea, она добавляется в div, под textarea. Так вот, всё прекрасно работает с одной картинкой, однако при перетаскивании другой, я заметил, что из массива dataTransfer.files пропадает прошлая картинка(смотрел по console.log(dataTransfer.files). Как сделать так, чтобы вторая картинка добавлялась в этот массив, а не заменяла предыдущую?

То, что я всё вывожу в #img1 - не обращайте внимание, это я еще не переделал. Как я и писал, я смотрел всё по console.log(dataTransfer.files).

$(document).on('keyup', 'textarea, .input', function() {
    var title = "# " + $('.input').val();
    var body = $('textarea').val();
  });
  
  $(document).on('drop', 'textarea', function(e) {
    e.preventDefault();
    var dt = e.originalEvent.dataTransfer;
    for (var i = 0; i < dt.files.length; i++) {
      var f1 = dt.files[i];
      var reader = new FileReader();
      reader.readAsDataURL(f1);
      reader.onload = function(e) {
        $("#img1").attr("src",e.target.result);
      };
    }
  });

Answer 1

[zkrvndm]

Примерно так:

var dt = new DataTransfer();
dt.items.add(file1);
dt.items.add(file2);
dt.items.add(file3);
console.dir(dt.files);