addEventListenerの挙動について

Question

実現したいこと

動的に作成されるbuttonタグにaddEventListenerを付与し、buttonタグの削除機能を実装したい。
また、buttonタグのindexとfilesのindexを紐づけ、タグが削除されるとfilesからも削除されるようにしたい。

前提

ここに質問の内容を詳しく書いてください。
以下の要件でファイルアップロード機能を作成しています。
・ファイルを選択またはドラッグすると、選択済ファイルとしてファイル名が画面に表示される。
・選択した複数ファイルを一括でアップロードできる。
・選択したファイルは×ボタンで取り消しが可能。

tagDeleteが発火すると紐付くbuttonタグが消えるところまでは確認できましたが、fileDeleteがうまく挙動しません。
例えばファイルを3つ選択した後、0番目のファイルを消したときにconsoleに表示されるのは"0"のみであってほしいのですが、for文が回った回数だけ（この場合3回）0が表示されます。
※本来、fileDeleteにindexを渡してfileList.filesから該当のファイルを消す処理を入れたいのですが、今は確認のためconsole.logでindexを表示するのみにしています。

また、ドラッグ部分まで処理が追い付いていないのでその部分は無視してください。
ごちゃごちゃやってしまったので中途半端な見づらいコードで申し訳ありませんが、お知恵を拝借できればと思います。

該当のソースコード

<div>アップロード用画面です</div>
<form action="test.html" method="post" enctype="multipart/form-data" >
      <div id="upFileWrap">
      <div id="inputFile">
        <!-- ドラッグ&ドロップエリア -->
        <p id="dropArea">
          アップロードするファイルをドロップ<br />またはファイルを選択してください
        </p>

        <!-- 通常のinput[type=file] -->
        <div id="inputFileWrap">
          <input type="file" name="uploadFile" id="uploadFile" multiple/>
          <div id="btnInputFile"><span>ファイルを選択</span></div>
      </div>
    </div>
    <div id="droppedFile"></div>
    <div id="sendBtnArea">
      <button id="sendBtn">アップロード</button>
    </div>
     <div>ドロップ済
    <ul id="showFiles"></ul>
      </div>
  </form>

// ドラッグ&ドロップエリアの取得
var fileArea = document.getElementById("dropArea");

// input[type=file]の取得
var fileInput = document.getElementById("uploadFile");
var showFiles = document.getElementById('showFiles');
var fileList = new DataTransfer();
var fileDelete;
var tagDelete;
var allDroppedFiles = [];

fileDelete = function(e){
　//本来ここでfileList.files[this.name]を削除してfileInput.filesに入れたい。
  console.log(this.name);  
}

tagDelete = function(){
         this.closest('li').remove();
    }

// ドラッグオーバー時の処理
fileArea.addEventListener("dragover", function (e) {
  e.preventDefault();
  fileArea.classList.add("dragover");
});

// ドラッグアウト時の処理
fileArea.addEventListener("dragleave", function (e) {
  e.preventDefault();
  fileArea.classList.remove("dragover");
});

// ドロップ時の処理
fileArea.addEventListener("drop", function (e) {
  e.preventDefault();
  fileArea.classList.remove("dragover");
  
  // ドロップしたファイルの取得
  //dt.items.add(e.dataTransfer.files[0]);

  // 取得したファイルをinput[type=file]へ
  //fileInput.files = dt.files;

  if (typeof files[0] !== "undefined") {
    //ファイルが正常に受け取れた際の処理
  } else {
    //ファイルが受け取れなかった際の処理
  }
});

//ドロップ済ファイル表示
fileInput.addEventListener('change', (e) => {
  allDroppedFiles.forEach(allDroppedFile => {
        allDroppedFile.removeEventListener('click', event);
    });
    console.log('全てのイベントリスナーが削除されました');
   
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    const li = document.createElement('li');
    const btn = document.createElement('button');
    btn.textContent = "×";
    btn.className = 'deleteBtn';
    li.textContent = files[i].name;
    li.appendChild(btn);
    showFiles.appendChild(li);
    fileList.items.add(files[i]);
  }
  
   allDroppedFiles = document.querySelectorAll('.deleteBtn');
   //console.log(allDroppedFiles.length);
   for (let index = 0; index <allDroppedFiles.length; index++){  
     allDroppedFiles[index].addEventListener("click",tagDelete);
     //allDroppedFiles[index].addEventListener("click",fileDelete);
     allDroppedFiles[index].addEventListener("click",{name: index, handleEvent: fileDelete});
  }
});

Answer 1

とりあえず受け取る側の確認はPHPを想定しておきます

削除ボタンから削除するのはあくまでもリストだけにしておき、送信時にformdataイベントでリストにないものはfilelistから削除する

<?PHP
print_r($_FILES);
?>
<style>
#dropArea{
  border:1px solid;
  position:relative;
  height:200px;
}
#uploadFile{
  position:absolute;
  top:0;
  width:100%;
  height:100%;;
  opacity:0;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  uploadFile.addEventListener("change",e=>{
    showFiles.textContent="";
    const fragment =[...uploadFile.files].reduce((x,y)=>{
      const li=tmp.content.querySelector('li').cloneNode(true);
      li.querySelector('span').textContent=y.name;
      x.appendChild(li);
      return x;
    },document.createDocumentFragment());
    showFiles.appendChild(fragment);
  });
  document.addEventListener("click",e=>{
    const t=e.target;
    if(t.matches('#showFiles .del')){
      t.closest('li').remove();
    }
  });
  document.addEventListener('formdata', e=>{
    const f=e.formData;
    const name=uploadFile.name;
    const fileList=f.getAll(name).filter(i=>[...showFiles.querySelectorAll('span')].map(x=>x.textContent).includes(i.name));
    f.delete(name);
    fileList.forEach(file=>{
      f.append(name,file);
    });
  });
});
</script>
<template id="tmp">
<li><span></span><input type="button" value="x" class="del"></li>
</template>
<form method="post" enctype="multipart/form-data" >
<div id="dropArea">
<div>アップロードするファイルをドロップ<br />またはファイルを選択してください</div>
<input type="file" name="uploadFile[]" id="uploadFile" multiple/>
</div>
<input type="submit">
<ul id="showFiles"></ul>
</form>

Comments

[ngk10]

ご回答ありがとうございました。
ご提供いただいたコードを自分なりに嚙み砕き、きちんと理解できた気がします。
とても助かりました、また機会がありましたらよろしくお願いいたします！

Answer 2

for文で毎回ループしているのが原因ですので、btn.addEventListener("click", { name: i, handleEvent: fileDelete });などと、ボタンを作成したタイミングでイベントを設定すればいいのではないでしょうか。

ただ、インデックスを使った結合ですと、何度か削除をしているとFileListのインデックスとズレると思うのですが、それはどのように対処する予定だったのか気になります。

Comments

[Lhankor_Mhy]

あー、removeEventListener で毎回全部イベントを消そうとしているんですね。なるほど。

そうだとすると、イベントを設定したときの引数をきちんと再現しないと消えないですね。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

イベントハンドラをどこかに保存しておくぐらいだったら、ボタンとファイルをもう少し強く結合させておく方が早そうな気がします。
または、AbortSignal で全停止するとか。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#options

[Lhankor_Mhy]

よく考えると、tagDelete をしたときもインデックスがずれるはずなので、毎回全消去する方法ならそっちでもイベントのツケ直しが必要ですね。

[ngk10]

ご回答ありがとうございました！
よくわからないまま使ってしまいましたが今後のためにEventListenerの使い方をもっと勉強します。
またお世話になる機会がありましたらどうぞよろしくお願いします。