[javascript] 자바스크립트로 파일 업로드 및 다운로드 중 파일 형식 제한하기

14 Dec 2023

javascript

파일 형식 제한은 웹 애플리케이션에서 파일 업로드 및 다운로드를 관리하고 보안을 강화하는 데 중요한 역할을 합니다. 자바스크립트를 사용하여 파일 업로드 시 사용자가 지정된 파일 형식만 업로드할 수 있도록 제한하고, 다운로드 시에도 원하는 파일 형식으로 다운로드를 제한할 수 있습니다. 이를 통해 보안을 강화하고 의도치 않은 파일 형식의 업로드나 다운로드를 방지할 수 있습니다.

파일 업로드 시 파일 형식 제한하기

자바스크립트로 파일 업로드 시, 사용자가 지정된 파일 형식만 업로드할 수 있도록 파일 선택 시 파일 형식을 검사하는 기능을 추가할 수 있습니다. 이를 위해 다음과 같은 방법을 사용할 수 있습니다.

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const allowedFileTypes = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 형식 목록
  if (allowedFileTypes.includes(file.type)) {
    // 허용된 파일 형식일 경우
    // 파일 업로드 로직 수행
  } else {
    // 허용되지 않는 파일 형식일 경우
    alert('지원되지 않는 파일 형식입니다.');
    event.target.value = ''; // 파일 선택 해제
  }
});

위 코드에서는 파일을 선택했을 때, 해당 파일의 형식을 확인하여 allowedFileTypes 목록에 포함되어 있는지 확인한 후 해당 여부에 따라 업로드 작업을 처리하거나 에러 메시지를 표시합니다.

파일 다운로드 시 파일 형식 제한하기

자바스크립트를 사용하여 다운로드 링크를 클릭했을 때 해당 파일 형식을 검사하여 원하는 파일 형식에 맞지 않는 경우 다운로드를 제한할 수 있습니다. 다음은 해당 방법의 예시입니다.

const downloadLink = document.getElementById('downloadLink');

downloadLink.addEventListener('click', (event) => {
  const allowedFileTypes = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 형식 목록
  const fileToDownload = 'example.pdf'; // 다운로드할 파일

  if (allowedFileTypes.includes(getFileType(fileToDownload))) {
    // 허용된 파일 형식일 경우
    // 파일 다운로드 로직 수행
  } else {
    // 허용되지 않는 파일 형식일 경우
    alert('지원되지 않는 파일 형식입니다.');
    event.preventDefault(); // 기본 다운로드 동작 취소
  }
});

function getFileType(filename) {
  return filename.split('.').pop(); // 파일명으로부터 파일 형식 추출
}

위 코드에서는 다운로드 링크를 클릭했을 때, 해당 파일의 형식을 확인하여 allowedFileTypes 목록에 포함되어 있는지 확인한 후 해당 여부에 따라 다운로드 작업을 처리하거나 에러 메시지를 표시합니다.

위 방법을 통해 자바스크립트를 사용하여 파일 업로드 및 다운로드 시 파일 형식을 제한할 수 있습니다. 이를 통해 애플리케이션의 보안을 강화하고 사용자 경험을 개선할 수 있습니다.

파일 업로드 시 파일 형식 제한하기

파일 다운로드 시 파일 형식 제한하기

참고 자료