JS 이미지 제거후 input 반영하기

이번 사이드프로젝트를 진행하며 관리자 페이지를 만들 일이 생겼다.

관리자 페이지에서 공연 항목을 생성한후 이미지를 미리보기 할 수 있어야 하는 기능이 필요했다.

따라서 미리보기 기능을 구현하였고 미리보기에서 이미지 선택시 제거하는 기능도 구현했다.

그런데 여기서 업로드시 삭제한 이미지도 같이 올라가는 문제가 발생했다...

왜 그럴까 찾다가 원본은 수정하지 않고 있었기에 반영이 되지 않았음을 알게 되었고 이를 다음과 같이 수정하여 해결하였다.

var fileArr;
var fileInfoArr=[];

//썸네일 클릭시 삭제.
function fileRemove(index) {
    console.log("index: "+index);
    fileInfoArr.splice(index,1);
    var imgId="#img_id_"+index;
    $(imgId).remove("");
    console.log(fileInfoArr);

    var imgId="#img_id_"+index;
    $(imgId).remove("");
    console.log(fileInfoArr);
}

여기서 splice를 사용하면 결국 원본은 변하지 않는다. 원본을 변경하게 코드를 다음과 같이 변경했다.

var fileArr;
var fileInfoArr=[];

//썸네일 클릭시 삭제.
function fileRemove(index) {
    const dt = new DataTransfer()
    const input = document.getElementById('images')
    const { files } = input
    for (let i = 0; i < files.length; i++) {
        const file = files[i]
        if (index !== i)
            dt.items.add(file) // here you exclude the file. thus removing it.
    }

    input.files = dt.files // Assign the updates list

    var imgId="#img_id_"+index;
    $(imgId).remove("");
    console.log(fileInfoArr);
}