메모장으로 돌아가기
Snippets

loadFile

#TypeScript#Utility#Browser

loadFile

브라우저에서 파일을 선택하고 로드하는 유틸리티 함수입니다. 파일 선택 후 제공받은 콜백 함수를 통해 파일 객체를 처리할 수 있습니다.

매개변수

속성타입필수기본값설명
onLoad(file: File) => void✅-파일 선택 시 호출되는 콜백 함수
acceptstring❌-허용할 파일 타입 (예: "image/*", ".txt")

코드

export const loadFile = (onLoad: (file: File) => void, accept?: string) => {
  if (!document) {
    return;
  }
 
  const fileInput = document.createElement("input");
  fileInput.type = "file";
  fileInput.accept = accept;
  fileInput.onchange = (e: Event) => {
    const file = (e.target as HTMLInputElement).files?.[0];
 
    if (file) {
      onLoad(file);
    } else {
      throw new Error("파일이 선택되지 않았습니다.");
    }
  };
 
  fileInput.click();
};

사용법

// 기본 사용법
loadFile((file) => {
  console.log('선택된 파일:', file.name);
});
 
// 특정 파일 타입만 허용
loadFile((file) => {
  console.log('이미지 파일:', file.name);
}, 'image/*');