에러발생

input 요소에 파일을 올려놓고 파일을 읽는 과정에서 다음과 같은 에러가 발생하였다.

DOMException: The requested file could not be read,
typically due to permission problems that have occurred
after a reference to a file was acquired.

에러를 발생하는 조건은 크게 2가지 경우에서 에러가 발생하였다.

1. input 요소에 파일을 올려놓고 컴퓨터에 있는 파일명을 변경한 경우
2. input 요소에 파일을 올려놓고 컴퓨터에 있는 파일의 내용을 변경한 경우

input 요소에 파일을 올려놓고 파일에 대한 참조를 얻은 후 원본 파일에 대한 변경이 일어나서 파일에 대한 권한 문제가 발생하여 해당 에러가 발생한 것으로 파악되었다.

그렇다면 input 요소에서 파일을 다시 선택하여 파일에 대한 참조를 다시 얻으면 되지 않을까 라는 생각을 하였다. 하지만 새로운 문제점이 발생하게 되었다.

input 요소는 동일한 파일명의 파일을 다시 선택하면 새롭게 파일이 참조되지 않는 다는 점이었다.

에러상황

다른 파일명을 선택해야 새롭게 파일에 대한 정보가 콘솔에 찍히는 것을 볼 수가 있다.

해결방법

import React, { useState, useRef } from "react";

const App = () => {
  const [file, setFile] = useState(null);
  const fileInput = useRef();

  const onChange = (e) => {
    setFile(e.target.files[0]);
  };

  const onClick = (e) => {
    e.target.value = null;
  };

  const readFile = () => {
    if (file) {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        console.log(e.target.result);
      };
      fileReader.onerror = (e) => {
        if (e.type === "error") {
          fileInput.current.value = null;
          return alert("에러발생! 파일을 다시 선택해주세요.");
        }
      };

      fileReader.readAsText(file);
    } else {
      return alert("파일이 없습니다.");
    }
  };

  return (
    <div>
      <div>
        <input
          type="file"
          ref={fileInput}
          onChange={onChange}
          onClick={onClick}
        />
      </div>
      <div>
        <button onClick={readFile}>파일 읽기</button>
      </div>
    </div>
  );
};

export default App;

1. 동일한 파일명에 대한 이슈를 해결하기 위하여 input 요소에 click 이벤트가 발생하는 순간 해당 target의 value를 null값으로 초기화하는 과정을 선행적으로 진행하게 만들었다.

2. 파일 변경에 대한 이슈를 해결하기 위하여 파일 참조 권한에 대한 에러가 발생한 경우에도 해당 target의 value를 null값으로 초기화를 진행하였다.

click 이벤트를 통하여 파일을 변경한게 아니라 change 이벤트를 통하여 파일을 선택한 경우에 2번 방법을 통하여 에러를 해결이 가능했다. onChange 함수에 해당 target의 value를 null값으로 초기화 하는 로직을 넣으면 계속 input 요소에 파일이 없기 때문에 onChange 함수에는 초기화 로직을 넣지 않았다.

결론

사용자가 해당 기능을 어떻게 사용하는지 알 수 없는 상황에서 항상 에러 대한 케이스를 잡아내는 과정은 항상 중요하다고 생각한다. input 요소에 올린 파일을 수정을 하지 않는다는 보장이 없기 때문에 해당 에러가 발생한 경우 유저들에게 최대한 에러 케이스를 해결주는 코드는 항상 중요하다고 생각한다. 언제나 우리들은 유저들을 믿으면 안된다. 생각하지 못한 방법으로 기능을 사용하기 때문이다.