nugawiki

./categories/front-end

input FileList 동적 변경 (DataTransfer)

업데이트 2026-07-21 조회수

input[type=file] FileList 동적 변경

HTMLInputElement.files는 읽기 전용처럼 직접 대입 불가.

→ **DataTransfer**로 새 FileList 구성 후 할당.

const input = document.querySelector('#file-input');
const dt = new DataTransfer();

Array.from(input.files)
  .filter(file => String(file.lastModified) !== removeTargetId)
  .forEach(file => dt.items.add(file));

input.files = dt.files;  // dt.files 사용 (items 아님)
<input type="file" id="file-input" multiple />

미리보기에서 개별 삭제 시: DOM 제거 + 위 필터로 input.files 동기화.

./comments