사진업로드 버그수정

기존 input의 file타입을 사용해서 프로필사진 업로드 기능을 구현하였었다.

const onChangeImg = (e: React.ChangeEvent<HTMLInputElement>) => {
  e.preventDefault();

  if (e.target.files) {
    const uploadFile = e.target.files[0];
    const formData = new FormData();
    formData.append('files', uploadFile);

    uploadImage(formData);
   }
 };

<input type="file" onInput={onChangeImg} accept="image/*" />

위와같이 event.target.files[0]으로 이미지파일의 정보를 가져올수 있었고 다음 api통신과 미리보기 기능을 구현했었다.

근데 첫번째 클릭시에는 onChangeImg함수가 잘 작동했지만 두번째 즉 짝수로 시도할때는 함수가 호출되지 않고있었다.

정확한 문제를 파악하지는모했지만, e.target.files[0]이 전에 등록했던 이미지정보가 덮어씌어지지 않는듯했다.

const onChangeImg = (e: React.ChangeEvent<HTMLInputElement>) => {
  e.preventDefault();

  if (e.target.files) {
    const uploadFile = e.target.files[0];
    const formData = new FormData();
    formData.append('files', uploadFile);

    uploadImage(formData);
    e.target.files = null;
   }
 };

<input type="file" onInput={onChangeImg} accept="image/*" />

그리하여 함수의 마지막코드로 files를 지워버리는 코드를 넣었고,
잘 작동하는것을 확인할수 있었다.

결과가 랜덤으로 작동하지않을때도 있어서 다시 연구중....