TypeScript·

loadFile

  • #TypeScript
  • #Snippets

loadFile

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

매개변수

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

코드

1
export const loadFile = (onLoad: (file: File) => void, accept?: string) => {

2
  if (!document) {

3
    return;

4
  }

5


6
  const fileInput = document.createElement("input");

7
  fileInput.type = "file";

8
  fileInput.accept = accept;

9
  fileInput.onchange = (e: Event) => {

10
    const file = (e.target as HTMLInputElement).files?.[0];

11


12
    if (file) {

13
      onLoad(file);

14
    } else {

15
      throw new Error("파일이 선택되지 않았습니다.");

16
    }

17
  };

18


19
  fileInput.click();

20
};

사용법

1
// 기본 사용법

2
loadFile((file) => {

3
  console.log('선택된 파일:', file.name);

4
});

5


6
// 특정 파일 타입만 허용

7
loadFile((file) => {

8
  console.log('이미지 파일:', file.name);

9
}, 'image/*');