첨부파일 관리 (DataTransfer)

📌 1.type="file" 

HTML에서 <input type="file"> 요소는 사용자가 로컬 컴퓨터에서 파일을 선택해 서버로 업로드할 수 있게 하는 입력 필드다.

file 입력 필드에 들어가는 데이터는 FileList 객체로 input[type="file"].files를 호출하면 FileList 객체가 반환된다.

 

 

✅ 동작 원리

1️⃣ html의 기본 요소 중 하나인 file 요소는 클릭 시 로컬 파일 탐색기 창을 열고,

2️⃣ 파일을 선택하면, <input> 요소의 값이 파일 객체로 채워진다.
3️⃣ 폼 제출 시, 파일이 multipart/form-data 형식으로 서버에 전송된다.

<input type="file" id="fileInput" multiple>

 

⚠️ 주의:
<form> 태그의 enctype이 반드시 multipart/form-data로 지정되어야 파일이 전송된다.

<form enctype="multipart/form-data">

 

📌 2. DataTransfer을 이용한 커스텀

커스텀하려면 DataTransfer 객체를 활용해 파일 목록을 관리하고, file 폼은 파일 선택창만 열 때만 사용하면된다.

 

👉 커스텀 기능 예시

🔹 커스텀 UI: 선택한 파일을 리스트로 보여주고, 삭제 버튼을 추가할 수 있음.
🔹 서버 연동: 파일을 업로드한 후, 서버에서 삭제/수정 API를 호출할 수 있음.
🔹 파일 선택창 사용: file 입력 필드는 단순히 파일을 추가하는 역할로만 사용.

 

📖 예제

const dt = new DataTransfer();
dt.items.add(new File(["content"], "example.txt")); // 파일 추가
document.querySelector("input[type=file]").files = dt.files; // 파일 필드에 적용

✔ UI에서 파일 삭제 시 DataTransfer.items.remove()를 활용!

 

📖 예제 (커스텀 UI + DataTransfer 활용)

<input type="file" id="fileInput" multiple hidden>
<button onclick="document.getElementById('fileInput').click()">파일 선택</button>
<ul id="fileList"></ul>

const fileInput = document.getElementById("fileInput");
const fileList = document.getElementById("fileList");
let dt = new DataTransfer();

fileInput.addEventListener("change", (e) => {
  for (const file of e.target.files) {
    dt.items.add(file);
    const li = document.createElement("li");
    li.textContent = file.name;
    const btn = document.createElement("button");
    btn.textContent = "삭제";
    btn.onclick = () => {
      dt.items.remove([...dt.files].indexOf(file));
      fileInput.files = dt.files;
      li.remove();
    };
    li.appendChild(btn);
    fileList.appendChild(li);
  }
  fileInput.files = dt.files;
});

 

📌 3. 파일 수정, 삭제 기능

보통 첨부파일 기능에서 기존 파일리스트를 가짜 객체 형태 (이름, 용량만 표시)로 들고와서 ui에 보여준다.

그리고 이에 대한 수정, 삭제 기능도 제공하기위해서 프론트에서 파일 리스트를 따로 관리해야한다. (백엔드에서 처리할 수도 있긴하다.)

 

🚀 파일 수정 기능에서 필요한 목록 3가지
1️⃣ newFileDT (새로 추가된 파일 리스트) → DataTransfer 객체로 관리
2️⃣ deleteList (삭제할 기존 파일 리스트) → 배열([])로 관리
3️⃣ keepList (유지할 기존 파일 리스트) → 기존 파일에서 deleteList를 제외한 나머지

 

📌 전체 흐름

• 기존 파일(existingFiles)을 UI에 표시.
• 사용자가 새 파일을 추가하면 newFileDT에 저장.
• 기존 파일을 삭제하면 deleteList에 추가.
• 전송 시 keepList는 기존 파일에서 deleteList를 제외한 나머지.

 

📖 HTML 구조

<input type="file" id="fileInput" multiple hidden>
<button onclick="document.getElementById('fileInput').click()">파일 선택</button>
<ul id="fileList"></ul>
<button onclick="submitFiles()">업로드</button>

 

📖 JavaScript 코드

const fileInput = document.getElementById("fileInput");
const fileList = document.getElementById("fileList");

// 기존 파일 목록 (DB에서 불러온 파일)
let existingFiles = ["old1.pdf", "old2.jpg"];
let deleteList = [];  // 삭제할 파일 목록
let newFileDT = new DataTransfer(); // 새로 추가한 파일 목록
let keepList = [...existingFiles]; // 유지할 기존 파일 목록 (초기값 = 기존 파일)

// 기존 파일 UI 표시
existingFiles.forEach(fileName => addFileToUI(fileName, false));

// 파일 추가 이벤트
fileInput.addEventListener("change", (e) => {
  for (const file of e.target.files) {
    newFileDT.items.add(file);
    addFileToUI(file.name, true);
  }
  fileInput.files = newFileDT.files;
});

// 파일을 UI에 추가하는 함수
function addFileToUI(fileName, isNew) {
  const li = document.createElement("li");
  li.textContent = fileName;
  const btn = document.createElement("button");
  btn.textContent = "삭제";

  btn.onclick = () => {
    if (isNew) {
      // 새 파일 삭제: DataTransfer에서 제거
      const index = [...newFileDT.files].findIndex(f => f.name === fileName);
      
      if (index > -1) {
        newFileDT.items.remove(index);
        fileInput.files = newFileDT.files;
      }
    } else {
      // 기존 파일 삭제: 삭제 리스트에 추가하고 유지 리스트에서 제거
      deleteList.push(fileName);
      keepList = keepList.filter(f => f !== fileName);
    }
    li.remove();
  };

  li.appendChild(btn);
  fileList.appendChild(li);
}

// 파일 전송 함수
function submitFiles() {
  console.log("✅ 유지할 기존 파일 목록:", keepList);
  console.log("❌ 삭제할 파일 목록:", deleteList);
  console.log("➕ 새로 추가한 파일 목록:", newFileDT.files);

  // 🔹 서버로 전송하는 로직 추가 가능 (AJAX 또는 FormData 활용)

}

 

🚀 정리

✔ 유지할 기존 파일(keepList) = existingFiles - deleteList
✔ 삭제할 파일(deleteList) = 사용자가 삭제한 기존 파일 목록
✔ 새로 추가된 파일(newFileDT) = file 입력 필드에서 추가한 파일 목록
✔ 서버 전송 시 3가지 리스트를 별도로 관리하면 깔끔하게 처리 가능!