<input type = file> 에서 동일한 파일 재업로드 하기

 

리액트의 JSX문법인걸 감안하길 바람

 

<>
        <input
          type="file"
          className={styles.hide}
          ref={dataInputRef}
          onChange={(e) => {
            onUploadFile(e);
          }}
        />
</>

위와 같이 작성했을 때, 동일한 파일을 재 업로드하면 onChange가 실행되지 않았다.

 

당연하다. 왜냐하면 동일한 파일을 재 업로드 하면 on'Change' 가 아니니깐,

 

인터넷을 검색해보니 e.target.value 를 '' 로 초기화해주라고 했다.

 

    <>

        <input
          type="file"
          className={styles.hide}
          ref={dataInputRef}
          onChange={(e) => {
            onUploadFile(e);
            e.target.value = '';
          }}
        />

    </>

위와 같이 e.target.value를 빈스트링으로 초기화 해주니 동일한 파일을 재 업로드 할 때도 잘 작동 하였다.