javascript 파일 업로드전에 파일 체크

목적

• 파일 크기가 0인 파일을 업로드하지 못하도록 방지
• 선택한 파일을 삭제, 이동, 이름변경한 경우 에러 메시지 출력

파일 업로드 처리를 라이브러리 등에 맡기고 있으면 자동으로 리트라이(retry) 처리가 되기도 하지만, 위의 상황에서는 무한 리트라이에 빠져 버리곤 합니다.
이러한 상황을 방지하기 위해사전에 체크하는 것이 이 글의 목적입니다.

---

방법

FileReader를 사용하여 파일을 읽을 수 있는지 확인합니다.

1. FileReader를 이용해 파일을 읽기전에 file.size를 체크하고 0이면 에러를 발생
2. onerror가 발생한경우 reject 처리
3. onloadstart이벤트에서 total이 0이면 reject 처리하고, abort()를 실행하여 파일의 읽기를 즉시 중단
4. onloadend이벤트에서는 resolve처리(이미 reject하지 않은 경우)

class FileEmptyError extends Error {}
  
const validateFile = (file) => {
  return new Promise((resolve, reject) => {
    const file_empty_error = new FileEmptyError(`선택한 파일(${file.name})은 0바이트이거나 손상되었거나, 다른 폴더로 이동되었을 수 있습니다.\n다시 파일을 선택해주세요.`);
    if (file.size === 0) {
      reject(file_empty_error);
      return ;
    }

    let rejected = false;

    // 읽을 수 있는 파일인지 체크
    const fr = new FileReader();
    const handle = (e) => {
      if (e.total === 0) {
        rejected = true;
        reject(file_empty_error);
      }
      else if (e.type === 'error') {
        rejected = true;
        reject(new Error('파일 읽기에 실패하였습니다.'));
      }

      // 파일 읽기 취소
      fr.abort();
    };
    
    fr.onloadstart = handle;
    fr.onerror = handle;

    fr.onloadend = (e) => {
      if (rejected) return ;
      resolve();
    };

    fr.readAsArrayBuffer(file);
  });
};

• onloadstart이벤트는 에러 발생 시 실행되지 않습니다. 그 때문에 onerror에서도 처리하고 있습니다.
• onloadend는 에러에도 에러가 아니어도 도중에 파일 읽기를 정지해도 실행됩니다.

---

샘플코드

<form onsubmit='upload(event)'>
  <div>
    <input type="file" name="file" value="" onchange='changeFile(event)' />
  </div>
  <button>전송</button>
</form>

const changeFile = (e) => {
  const file = e.currentTarget.files[0];
  if (file) {
    // File 오브젝트는 size 속성에 처음 접근한 시점의 파일사이즈로 고정
    // 이번에는 파일 사이즈 제한 등을 체크
    // (브라우저에 따라 다를수 있음)
    file.size;
  }
};

const upload = async (e) => {
  e.preventDefault();
  
  const file = e.target.elements.file.files[0];
  if (!file) alert('파일을 선택해 주세요');
  
  console.log('size:', file.size);
  try {
    await validateFile(file);
    alert('정상적으로 업로드 되었습니다');
  }
  catch (err) {
    alert(err);
  }
};

 

위의 코드는 선택한 파일이 0바이트인지를 체크하고, FileReader를 사용하여 파일을 읽어보면서 파일이 손상되었거나 이동된 경우 오류를 발생시키는 간단한 파일 유효성 검사를 수행합니다. 이 코드를 사용하여 파일 업로드 전에 파일을 검증할 수 있습니다.