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

Question

안녕하세요 강의 열심히 수강 중인 학생입니다! 좋은 강의 감사합니다. 강의의 비디오 업로드 페이지에서 파일을 선택함으로써 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 정보만으로 클라이언트 상에 데이터가 뿌려지지만 서버 로컬 폴더에는 클라이언트에 보내지 않을 파일이 잔류하게 됩니다...  이 경우를 어떻게 처리할까요?!

John Ahn · Answer

안녕하세요 그럴할 경우에는 파일을 처음부터 바로 올리는 것이 아닌 change 이벤트에서는 파일을 그냥 갖고만 있고
submit 할때 데이터를 넘겨주면서 같이 파일도 저장하는 방법도 있습니다 ^^