ต่อยอดการใช้ Stimulus จัดการ input เพื่ออัพโหลดหลายๆ ไฟล์พร้อมกัน

  addFile (event) {
    const originalInput = event.target
    const originalParent = originalInput.parentNode
    const newInput = originalInput.cloneNode()

    // [1]. จากโค้ดที่ทำการสร้าง label ชื่อไฟล์จาก originalInput.files[0] ก็เปลี่ยนมาใช้การวนลูปแทน
    Array.from(originalInput.files).forEach(file => {
      const selectedFile = document.createElement("div")
      selectedFile.className = "grid grid-cols-3 gap-4 py-4"
    
      const divElement = document.createElement("div")
      divElement.className = "col-span-2"
      const labelNode = document.createElement("label")
      labelNode.appendChild(document.createTextNode(file.name))
      divElement.appendChild(labelNode)
      selectedFile.appendChild(divElement)

      // [2]. เพิ่มปุ่มโดยใช้ <a> และเขียนโค้ดในการลบไฟล์ดังกล่าวทิ้ง
      const deleteElement = document.createElement("a")
      deleteElement.setAttribute("class", "font-bold text-red-800 cursor-pointer")
      deleteElement.setAttribute("data-action", "multi-upload#removeFile")
      deleteElement.appendChild(this.deleteIcon)
      selectedFile.appendChild(deleteElement)

      originalInput.className = "hidden"
      selectedFile.append(originalInput)

      this.filesTarget.append(selectedFile)
    })

    // Clear value
    newInput.value = ""
    originalParent.append(newInput)
  }