input 태그 file 타입에 선택된 파일 삭제하기

input 태그의 file 타입은 서버에 파일을 업로드하는데 사용할 수 있다.

 

multiple 속성으로 여러 개의 파일을 한 번에 선택해 업로드할 수도 있는데

이 여러 개의 파일들 중 특정 파일을 항목에서 삭제하는 기능을 구현하고자 한다.

 

현재 파일 추가 페이지는 다음과 같다.

 

 

파일 선택을 통해 업로드하고자하는 파일을 선택할 수 있다.

파일을 선택하면 다음과 같이 아래에 선택한 파일 정보 목록이 출력되도록 했다.

 

 

 

여기서 삭제 버튼을 클릭하면 해당 파일만 선택 항목에서 삭제되어야 한다.

코드는 다음과 같다.

 

$(document).on('click', '.deleteBtn', function(){
    deleteFile(this);
});


function deleteFile (target){
	
    let files = $('#file')[0].files;
    let fileArray = Array.from(files);

    var fileNum = $(target).parents('.tableBody').find('.deleteBtn').index(target);
    fileArray.splice(fileNum, 1);
	
    const dataTransfer = new DataTransfer();
	
    for(let i = 0; i < fileArray.length; i++){
        dataTransfer.items.add(fileArray[i]);
    }
	
    $('#file')[0].files = dataTransfer.files;
    readyFile();
}

 

1. 파일 목록 가져오기

이 예시의 경우 file을 선택하는 input 태그에 'file'이라는 아이디가 지정되어있다.

여기서 제이쿼리를 사용해 '#file' 요소를 가져오고 해당 요소에 등록된 FileList를 가져온다.

이렇게 files 변수에는 file 정보가 담긴 FileList라는 배열과 비슷한 형태의 데이터가 저장된다.

 

2. 파일 목록을 배열로 만들기

그리고 이 데이터를 배열로 저장하기 위해 Array.from() 함수를 사용하는데,

이 함수는 배열과 같은 형태를 한 객체를 얕은 복사해 배열(Array) 객체를  생성한다.

 

3. 삭제 파일 인덱스 가져오기

그 다음 삭제하고자하는 파일이 이 목록의 몇 번째 파일인지 알아야하는데

이는 목록에 있는 버튼의 순서를 사용해 알아낼 수 있다.

버튼 요소들이 담겨있는 부모 요소인 tbody(클래스는 tableBody)에 접근하여 버튼들을 찾는데

여기서 index() 함수를 사용해 사용자가 클릭한 버튼이 전체 버튼 중 몇 번째 버튼인지 알 수 있다.

 

4. 삭제 파일을 배열에서 제거

버튼의 인덱스를 통해 알아낸 파일 인덱스로 배열에서 해당 파일을 splice() 함수로 잘라낸다.

 

5. 배열의 파일 목록을 input 태그에 돌려놓기

남아있는 파일 정보를 다시 선택 파일 목록에 넣어주어야하는데

여기서 DataTransfer 클래스를 사용한다.

 

input 태그의 file 타입은 선택한 파일 목록을 FileList라는 형태로 저장하는데

이 fileList는 임의로 값을 수정하는 것이 불가능하다. 

 

DataTransfer 클래스는 드래그 앤 드롭 API와 관련해서 자주 사용되는데

이 드래그 앤 드롭 과정을 처리할 때 FileList를 사용한다.

이 기능을 활용해 배열에 담긴 파일 정보를 FileList 객체로 변환하여

input 태그의 파일 목록으로 보내줄 수 있다.

 

DataTransfer 인스턴스를 생성한 후, items.add() 함수로 배열에 담겨있던 파일 정보를 모두 넘겨준다. 

 

이제 input 태그에 DataTransfer 인스턴스에 담긴 파일 정보를 전달는데

이때는 items가 아닌 files 키워드를 사용하여 전달한다.

마지막으로 파일 정보 목록을 갱신하면 끝이다.

 

다음과 같이 input 태그에서도 선택된 파일 개수가 줄어든 것을 확인할 수 있다.