FileList 객체는 직접 수정할 수 없습니다
HTML5에서 <input type="file" multiple> 요소를 사용하면 사용자가 여러 개의 파일을 한 번에 선택할 수 있습니다. 이때 선택된 파일들은 FileList 객체에 담기게 되는데, 문제는 이 FileList가 읽기 전용(read-only)이라는 점입니다.
따라서 JavaScript로 DOM에서 항목을 제거하듯이 FileList의 요소를 바로 삭제하는 것은 불가능합니다. 예를 들어 아래와 같은 코드는 동작하지 않습니다.
$('input:file#upload')[1].files이 객체에 직접 splice() 같은 배열 메서드를 적용해도 파일 목록은 변경되지 않습니다.
해결 방법 1: 배열로 복사한 후 조작하기
가장 일반적인 해결 방법은 FileList의 내용을 일반 JavaScript 배열로 복사하는 것입니다. 배열은 자유롭게 수정할 수 있으므로, 복사한 후 원하는 방식으로 항목을 제거하면 됩니다.
// FileList를 배열로 변환
const fileList = $('input:file#upload')[1].files;
const fileArray = Array.from(fileList);
// splice 등 원하는 메서드로 항목 제거
fileArray.splice(1, 1); // 두 번째 파일 삭제 예시
배열로 변환하는 방법은 Array.from(fileList) 외에도 스프레드 연산자([...fileList])를 사용할 수 있습니다. 변환된 배열에는 splice, filter, pop 등 어떤 메서드든 자유롭게 사용할 수 있습니다.
해결 방법 2: 업로드 후 JavaScript로 객체 삭제하기
또 다른 접근 방식은 HTML 파일 업로더를 통해 파일을 먼저 업로드한 뒤, JavaScript를 사용하여 해당하는 객체를 삭제하는 것입니다. 이 방식은 이미 업로드가 완료된 상태에서 특정 파일만 골라 제거해야 하는 경우에 유용합니다.
정리
- FileList 객체는 읽기 전용이므로 직접 항목을 제거할 수 없습니다.
Array.from()또는 스프레드 연산자로 배열에 담은 뒤splice등의 메서드로 항목을 관리하세요.- 업로드 후 JavaScript로 해당 객체를 삭제하는 방법도 대안이 될 수 있습니다.