[javascript & html] input file 첨부파일 n개 이상이면 자르기 (DataTransfer)

문제상황

리뷰 등록하는 페이지에서 이미지 파일은 최대 3개까지 첨부가 가능하다.
따라서 3개 이상 첨부 시, 앞에 3개만 보여줘야 한다.
input file의 change 이벤트 안에 files를 찍으니 fileList라는 Object로 들어와서 강제로 수정하려고 하니 수정 불가

예)
첨부: 사진1, 사진2, 사진3, 사진4, 사진5
결과: 사진1, 사진2, 사진3

 

해결방법

DataTransfer() 로 다시 배열을 재구성하여 this.files에 담아주었다.

const maxLength = 3;
if (this.files.length > maxLength) {
	const transfer = new DataTransfer();
    Array.from(this.files) //새로 배열 만들 그릇
    	.slice(0, maxLength) //첫번째 인덱스부터 최대개수까지 자르기
        .forEach(file => {
        	transfer.items.add(file) //여기서 file 반복 돌려서 추가
        })
    this.files = transfer.files; //this.files 안에 다시 넣어주기
}​