비디오 업로드 시에 file change 이벤트 시에 서버 로컬에... - 인프런

안녕하세요 강의 열심히 수강 중인 학생입니다!

좋은 강의 감사합니다.

강의의 비디오 업로드 페이지에서 파일을 선택함으로써 change 감지를 하여 해당 파일을 핸들링하는 이벤트 함수를 정의하였잖아요!

const onFileChange = (e) => { 
        let files = e.currentTarget.files;
        let formData = new FormData;
        
        formData.append('file', files[0]);

        const config = {
            header: {'content-type': 'multipart/form-data'}
        };

        axios.post('/api/image/uploadfiles', formData, config)
        .then(response => {
            if(response.data.success) {
                console.log(response.data);

                setFilePath(response.data.url);
            } else {
                alert('이미지 업로드를 실패했습니다.');
                setFilePath(undefined);
            }
        })
        .catch(error => {
            console.log(error);
        });
   };

그런데 이 부분에서 문제가 submit 이벤트가 아닌, change 이벤트에서 서버 로컬에 파일을 저장한다는 것입니다.

만일 클라이언트 사용자가 파일을 한 번 선택하고서

잘못 선택했네? 이러면서 다시 다른 파일을 선택 후에

form을 제출하게 되면

DB에는 마지막으로 선택한 파일 정보가 저장이 되지만, 서버를 돌리는 로컬 폴더에는 그 전에 선택한 파일까지도 올라가는 현상이 발행하게 됩니다.

물론, DB 정보만으로 클라이언트 상에 데이터가 뿌려지지만 서버 로컬 폴더에는 클라이언트에 보내지 않을 파일이 잔류하게 됩니다...

이 경우를 어떻게 처리할까요?!

인프런 커뮤니티 질문&답변

비디오 업로드 시에 file change 이벤트 시에 서버 로컬에 파일을 업로드 하잖아요!