파일 업로드 type 제한 방법

 

javascript에서 파일 타입을 확인/제한하는 방법, React에서 파일 타입을 확인/제한하는 방법, Nextjs에서 파일 타입을 확인/제한하는 방법에 대해 모두 알아보자. 기본적으로 파일을 업로드하는 로직이 있어야 한다.

 

 

JavaScript 파일 업로드 type 제한

 

우선은 HTML/JavaScript 로직으로 우선 확인을 해보자.

 

<input type="file" id="input" multiple />
<output id="output">상태창</output>

 

input element를 통해 파일을 추가할 수 있도록 만든다.

 

 

그리고 자바스크립트 로직을 아래와 같이 작성해 준다.

 

// Our application only allows GIF, PNG, and JPEG images
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "Choose image files…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed
    ? "All files clear!"
    : "Please choose image files only.";
});

 

allowedFileTypes 변수에 허용할 리스트 타입들을 넣어준다. 그리고 파일이 업로드되면 event.target.files을 통해 파일을 얻는다. 그 후에 allAllowed 변수 부분을 확인해서 file 값이 있는지 없는지 확인을 해준다. 

 

 

React 파일 업로드 type 제한

React/Nextjs에서 사용하는 방식을 알아보자. 테스트 코드는 아래와 같다.

 

const TestComponent = () => {
    const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
        if (!e.target.files) return;
        const file = e.target.files[0];
        const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
        const allAllowed = Array.from(files).every((file) =>
            allowedFileTypes.includes(file.type),
        );
        
        // allAllowed에 포함된 파일 유무에 따라 도메인 로직을 작성해 주면된다.

    }
    
    return (
    	<>
            <input
                type='file'
                placeholder='file UPLOAD'
                accept='image/*'
                name="image"
                onChange={(e) => handleImageChange(e)}
            />

        </>
    )
    
}

export default TestComponent;

 

 

 

 

정리하면, 파일을 받아서 타입값을 확인하고 체크하는 로직이다. 현재 브라우저에서 파일 type 체크를 하는 방법을 소개했다. 하지만 server에서 체크하는 방법도 있으니 관련 부분이 필요하다면 추가 공부를 해보자.