[스프링 부트] 첨부파일(파일 업로드) 목록 수정 - 21

input 태그의 type="file" 파일을 추가 및 삭제하는 수정 방법에 대해 알아보자.

구현 모습

 

createPosterForm.html

<input type="file" name="files" multiple="multiple" onchange="test(this.files)">
<div id="file-list">
</div>

onchange 속성으로 요소 값 변경시 test 메서드를 실행하게했다.

이때 input type="file" 태그의 files를 넘겨준다.

 

this.files는 아래와 같다.

input type="file"의 files

 

스크립트 부분 test 함수를 보자.

 

test 함수

let selectedFiles = [];

    function test(files) {
        console.log(files);
        const fileList = document.getElementById('file-list');
        for(let i=0; i<files.length; i++) {
            selectedFiles.push(files[i]);
            const item = document.createElement('div');
            const fileName = document.createTextNode(files[i].name);
            const deleteButton = document.createElement('button');
            deleteButton.addEventListener('click', (event) => {
                item.remove();
                event.preventDefault();
                deleteFile(files[i]);
            });
            deleteButton.innerText="X";
            item.appendChild(fileName);
            item.appendChild(deleteButton);
            fileList.appendChild(item);
        }
    }

파일들을 추가할때 태그를 생성하여 'file-list' 아래에 파일에 관한 정보와 삭제 버튼을 자식으로 보냈다. 

selectedFiles 배열에 입력한 파일들을 push하여 가지고 있는다.

삭제 버튼 클릭시 해당 파일의 div 태그를 제거하여 보여지는 파일 정보를 지우고

deleteFile 메서드에 파일을 넘겨 삭제 처리 로직을 수행한다.

 

deleteFile 함수

    function deleteFile(deleteFile) {
        const inputFile = document.querySelector('input[name="files"]');
        const dataTransfer = new DataTransfer();
        selectedFiles = selectedFiles.filter(file => file!==deleteFile);
        selectedFiles.forEach(file => {
            dataTransfer.items.add(file);
        })
        inputFile.files = dataTransfer.files;
    }

input 태그의 files는 DataTranfer 객체로 변경(삭제)해야한다.

우선 파일들을 관리하고있는 selectedFiles에서 해당 file을 filter를 통해 제외하여 변경한다.

그리고 selectedFiles의 file 데이터들을 dataTransfer의 items에 add해준다.

input 태그의 files를 datatransfer의 files로 변경해주면 우리가 관리하고 있는 파일목록으로 변경할 수 있다.

 

 

동작 결과