formDataオブジェクトにappend()することができない

Question

やりがいこと

複数ファイルをドラッグアンドドロップでアップロードすることをしたいと考えております。そのために、ユーザーがドロップしたファイルを複数受け取るために、事前にFormData型の変数であるformData変数を以下の通り準備して以下のようにループ無いでそれぞれ格納しようとしているのですが、console.log(formData);hereで実行する結果、必要な情報がappendされません。

ご質問

これがappendされ情報が格納されない理由と、解決方法についてアドバイスを頂けますと幸いです。

よろしくお願いいたします。

  <div class="drop-area">
    <label>
        <input type="file" name="example" accept="image/jpeg, image/png" class="uploader">
        <div class="preview-area"></div>
    </label>
</div>

   var formData = new FormData();
        $(document).on('drop', '.drop-area' ,function (event) {
          var files = event.originalEvent.dataTransfer.files;
            for (var i = 0; i < files.length; i++) {
              console.log(files[i]);//works
                formData.append('document_files[]', files[i]);
            }
            console.log(formData);here
            $(this).find('.uploader').trigger('change');//プレビューを表示できるようにする

        })

Comments

[yambejp]

追加だけで削除はしなくてよいのでしょうか？

Answer 1

console.log(formData);hereで実行する結果、必要な情報がappendされません。

この方法では、正しく入っていても中身を確認できません。

console.log(...formData.entries())のようにして確認してみましょう（参考）。

Comments

[pegy]

確認することができました、ありがとうございます！

Answer 2

こんな感じでどうでしょう？

<style>
.drop-area{
border:1px solid;
  position:relative;
height:200px;
}
.uploader{
position:absolute;
top:0;
width:100%;
height:100%;;
opacity:0;
  background-Color:lime;
}
</style>
<script>
const fd=new FormData();
document.addEventListener('click',e=>{
  const {target}=e;
 if(target.matches('.uploader')){
   e.preventDefault();
 }
});
document.addEventListener('drop',e=>{
  e.preventDefault();
  const {target}=e;
  if(target.matches('.uploader')){
    [...e.dataTransfer.files].forEach(x=>fd.append("document_files[]",x));
   console.log([...fd]);
  }
});
</script>
<div class="drop-area">
ここにdrop
    <label>
        <input type="file" name="example" accept="image/jpeg, image/png" class="uploader" multiple>
        <div class="preview-area"></div>
    </label>
</div>

Comments

[pegy]

ご回答ありがとうございます。
申し訳ございませんが、初心者であるため、記法でわからないものがあり変数に対する括弧書き{target}や...について、調べながら確認をしております。
質問欄へのコメントについてですが、削除も意図しており、そこは配列において、削除したい要素を特定してarray.splice()することをイメージしておりました。ご質問の趣旨と相違しておりましたら、またご指摘願えれば幸いです。

[pegy]

すみません、スプレッド演算子については、理解いたしました。これまで配列を入れ替えたりMergeしたりするときはループで回していたりしたのですが、便利な記法があるのですね、ありがとうございます。