File API | Minstudio

안전한 클라이언트 사이드 파일 제어

File API는 웹 애플리케이션이 유저의 로컬 파일 시스템에 있는 파일을 읽을 수 있도록 해주는 표준 인터페이스입니다.
서버에 파일을 업로드하기 전에 클라이언트(브라우저) 측에서 먼저 파일을 가로채어, 이미지 미리보기를 제공하거나 파일 크기/포맷을 검증하는 등 사용자 경험(UX)을 대폭 향상시킬 수 있습니다.

1. "문서 수발실과 스캐너" (비유)

📦

File 객체 (택배 상자)

유저가 <input type="file">로 파일을 선택하면 전달받는 상자입니다. 상자 겉면의 송장(이름, 크기, 타입)만 읽을 수 있고, 아직 내용물은 볼 수 없습니다.

🖨️

FileReader (스캐너)

택배 상자를 뜯어 내용물을 브라우저가 이해할 수 있는 형태(텍스트, 이미지 URL 등)로 스캔해주는 기계입니다. 변환이 끝나면 onload 알림을 줍니다.

2. 파일 처리 파이프라인 (Diagram)

3. FileReader 핵심 메서드

메서드 (읽기 방식)	설명 및 반환 결과 (e.target.result)
`readAsDataURL(file)`	파일을 Base64로 인코딩된 문자열 형태의 Data URL로 읽어옵니다. 주로 `<img>` 태그의 `src` 속성에 넣어 이미지 미리보기를 구현할 때 가장 많이 사용됩니다.
`readAsText(file)`	파일을 일반적인 텍스트(문자열)로 읽어옵니다. 텍스트 파일(txt)이나 CSV, JSON 파일을 클라이언트에서 파싱할 때 유용합니다.
`readAsArrayBuffer(file)`	파일을 바이너리 데이터 버퍼인 ArrayBuffer로 읽어옵니다. 오디오/비디오 파일을 자르거나 웹소켓을 통한 스트리밍 전송 등 저수준의 데이터 조작이 필요할 때 사용됩니다.

<div class="file-app"> <div class="header"> <h2>이미지 업로드 및 미리보기</h2> <p>서버 전송 없이 로컬에서 이미지를 읽어옵니다.</p> </div> <div class="upload-container"> <label for="fileInput" class="upload-btn"> <i class="ph-duotone ph-upload-simple"></i> 파일 선택하기 </label> <input type="file" id="fileInput" accept="image/*" style="display: none;"> <p class="file-info" id="fileInfo">선택된 파일이 없습니다.</p> </div> <div class="preview-container" id="previewContainer"> <div class="placeholder" id="placeholder"> <i class="ph-duotone ph-image"></i> <p>이미지 미리보기 영역</p> </div> <img id="previewImage" src="" alt="미리보기" style="display: none;"> </div> </div>

메서드 (읽기 방식)

설명 및 반환 결과 (e.target.result)

readAsDataURL(file)

파일을 Base64로 인코딩된 문자열 형태의 Data URL로 읽어옵니다. 주로 <img> 태그의 src 속성에 넣어 이미지 미리보기를 구현할 때 가장 많이 사용됩니다.

readAsText(file)

파일을 일반적인 텍스트(문자열)로 읽어옵니다. 텍스트 파일(txt)이나 CSV, JSON 파일을 클라이언트에서 파싱할 때 유용합니다.

readAsArrayBuffer(file)

파일을 바이너리 데이터 버퍼인 ArrayBuffer로 읽어옵니다. 오디오/비디오 파일을 자르거나 웹소켓을 통한 스트리밍 전송 등 저수준의 데이터 조작이 필요할 때 사용됩니다.