230906) react에서 input 태그를 활용하여 file 확장자 및 용량 제한하기

input 태그 안에 accept 를 넣어 원하는 확장자를 넣어 두면 파일 선택 시 '사용자 지정 파일'이라는 파일 형식 제한으로 파일을 선택할 수는 있지만 해당 탭을 '모든 파일'로 누르게 되면 여전히 모든 파일을 선택할 수 있다는 점에서 유저의 파일을 통제할 수가 없다는 단점이 존재하였다...

유저 입장에서는 개발자가 어떤 파일 형식을 원해서 사용자 지정 파일을 선택해 놨는지 알 수가 없기에 어? 사용자 지정 파일? 그냥 모든 파일로 해서 봐야지~ 하고 모든 파일로 파일 형식을 설정해 놓고 볼 수 있기 때문에 충분히 위험이 도사리고 있다...

 

그래서 아래와 같은 코드를 통해 input 의 accept 을 통한 파일 제한 뿐만 아니라, 파일 확장명과 용량을 제한하여 허용하지 않은 파일이 선택됐을 경우 alert창이 발생하며 사진이 등록되지 않도록 막아 두었다!

const MAX_IMAGE_SIZE_MB = 5; // 최대 허용 이미지 파일 크기 (MB 단위)
const MAX_IMAGE_SIZE_BYTES = MAX_IMAGE_SIZE_MB * 1024 * 1024; // MB를 바이트로 변환

  const [selectedFiles, setSelectedFiles] = useState([]);
  
 // 이미지 파일 확장자를 확인하는 함수
  function isImageFile(fileName) {
    const allowedExtensions = ["jpg", "png", "gif"];
    const fileExtension = fileName.split(".").pop().toLowerCase();
    return allowedExtensions.includes(fileExtension);
  }
  
  const handleFileSelect = (e) => {
    const files = Array.from(e.target.files);
    for (const file of files) {
      if (!isImageFile(file.name)) {
        alert("파일은 jpg, png, gif 형식의 파일만 업로드 가능합니다!");
        return;
      }
      if (file.size > MAX_IMAGE_SIZE_BYTES) {
        alert(`파일 크기는 ${MAX_IMAGE_SIZE_MB}MB를 초과할 수 없습니다!`);
        return;
      }
    }

    setSelectedFiles(files);
 }

파일을 등록할 때 제한을 거는 부분들

<s.FileInputBox
            id="file-input"
            type="file"
            onChange={handleFileSelect}
            multiple
            accept=".gif, .jpg, .png, .jpeg"
          />

jsx의 input부분

 

이렇게 설정해 주면 파일을 등록할 때 유저가 '모든 파일'을 보기로 선택 한 후 허용하지 않은 파일을 선택하여도 등록을 하려고 시도할 때 alert창이 발생하며 이미지 등록이 되지 않게 된다!

 

---

 

 

오늘도 잘 해냈다!