Javascript로 파일 업로드 필터링 및 유효성 검사

저는 개인 프로젝트의 백엔드(PHP 및 MySQL 사용)에서 작업하고 있었는데 파일의 유효성을 검사하고 필터링해야 했으며 서버에서 png 및 특정 크기 이하의 파일만 허용했습니다.

나는 프런트엔드에서 똑같이 할 수 있다는 것을 깨닫기 전에 백엔드에서 검증과 필터링을 했다. 이것은 이중 계층 보호를 제공합니다. 음, 프런트 엔드에 대한 유효성 검사는 쉽게 우회할 수 있지만 적어도 견고성에 기여합니다.

다음은 HTML 또는 자바스크립트를 사용하여 프런트 엔드에서 이를 달성하는 방법입니다.

HTML만 사용

HTML에서는 accept 속성을 사용하여 파일 형식을 지정해야 합니다. 이를 통해 파일 업로드 버튼을 클릭한 후 나타나는 창에는 수락 속성에 지정된 파일만 표시됩니다.

<input type="file" multiple accept=".jpg, .png"/>

위의 예에서는 jpg 및 png 파일만 허용합니다. pdf 또는 docx와 같은 다른 파일 형식은 선택 창에 표시되지 않습니다.

이 방법은 사용자가 파일 선택 창에서 모든 파일을 클릭할 수 있으므로 사용자가 선택할 수 있는 모든 파일 유형(피하려는 파일 포함)을 표시하므로 실제로 강력하지 않습니다.



또한 여러 파일을 업로드할 수 있도록 여러 개를 포함했습니다.

또한 파일 크기를 제어할 수 없습니다. 여기서 자바스크립트가 등장합니다.

자바스크립트 사용

자바스크립트를 사용하면 파일과 함께 제공되는 크기 및 기타 메타데이터뿐만 아니라 파일 유형을 제어할 수 있습니다. 이 절차의 전체 아이디어는 파일을 업로드할 때 생성되는 파일 객체를 중심으로 이루어집니다. 이 파일 개체에는 이름, 크기, 수정 또는 생성 날짜 등과 같은 파일에 대한 정보가 들어 있습니다.

//attaching "change" event to the file upload button
document.getElementById("file").addEventListener("change", validateFile)

function validateFile(){
  const allowedExtensions =  ['jpg','png'],
        sizeLimit = 1_000_000; // 1 megabyte

  // destructuring file name and size from file object
  const { name:fileName, size:fileSize } = this.files[0];

  /*
  * if filename is apple.png, we split the string to get ["apple","png"]
  * then apply the pop() method to return the file extension
  *
  */
  const fileExtension = fileName.split(".").pop();

  /* 
    check if the extension of the uploaded file is included 
    in our array of allowed file extensions
  */
  if(!allowedExtensions.includes(fileExtension)){
    alert("file type not allowed");
    this.value = null;
  }else if(fileSize > sizeLimit){
    alert("file size too large")
    this.value = null;
  }
}

이 작업을 수행하는 더 좋은 방법이 있습니까? 아니면 내 설명이 혼란스럽습니까? 어떻게 개선할 수 있을까요? 댓글로 알려주세요. 읽어 주셔서 감사합니다