pqina/filepond

어떤 프로젝트인가요?

핵심 기능

• 01드래그 앤 드롭, 파일 선택기, 붙여넣기 또는 API를 통해 파일, 디렉터리, 원격 URL, Data URI를 입력할 수 있습니다.
• 02청크 업로드와 AJAX 업로드를 지원하며, form post에서 선택적으로 base64 인코딩을 사용할 수 있습니다.
• 03업로드 전에 이미지 크기 조정, 자르기, 필터 적용 및 EXIF 방향 보정을 할 수 있습니다.
• 04키보드로 탐색할 수 있으며 VoiceOver와 JAWS를 비롯한 스크린 리더로 테스트를 거쳤습니다.
• 05미리보기, 유효성 검사, 메타데이터용 플러그인으로 기능을 확장할 수 있습니다.

활용 사례

• 클라이언트 측 이미지 크기 조정을 적용해 웹 앱에 아바타나 사진 업로드 기능을 추가합니다.
• React, Vue, Angular 또는 Svelte 프로젝트에 여러 파일을 업로드하는 폼을 구현합니다.
• 브라우저에서 백엔드 서버로 대용량 파일을 청크 단위로 업로드합니다.
• 스크린 리더에 의존하는 사용자를 위한 접근성 높은 업로드 위젯을 제공합니다.

빠른 시작

1. 1

   npm에서 FilePond를 설치합니다

   npm install filepond
2. 2

   FilePond를 가져와 여러 파일을 업로드하는 컴포넌트를 만듭니다

   import * as FilePond from 'filepond';
3. 3

   컴포넌트를 DOM에 추가합니다

사용 전 알아둘 점

• !Quick Start 코드는 개략적인 예시입니다. 업로드를 받으려면 백엔드 엔드포인트가 별도로 필요합니다.
• !README에 따르면 테스트 커버리지는 약 65%입니다.
• !테스트용 v5 alpha가 제공되므로 메인 API가 변경될 수 있습니다.

포함된 컬렉션

토픽

자주 묻는 질문

filepond은(는) 무엇인가요?

드래그 앤 드롭, 이미지 최적화, 청크 업로드와 React, Vue, Angular, Svelte 어댑터를 지원하는 JavaScript 파일 업로드 라이브러리입니다. FilePond는 브라우저에서 파일 업로드를 처리하는 JavaScript 라이브러리입니다. 사용자는 파일을 드래그해 놓거나 파일 시스템에서 선택하고, 붙여넣거나 API를 통해 추가할 수 있습니다. 디렉터리, Blob, 원격 URL, Data URI도 입력으로 지원합니다.

filepond은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

filepond은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

filepond은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. filepond의 마지막 커밋은 2026년 10월 28일입니다.

filepond은(는) 어디에 사용할 수 있나요?

클라이언트 측 이미지 크기 조정을 적용해 웹 앱에 아바타나 사진 업로드 기능을 추가합니다. React, Vue, Angular 또는 Svelte 프로젝트에 여러 파일을 업로드하는 폼을 구현합니다. 브라우저에서 백엔드 서버로 대용량 파일을 청크 단위로 업로드합니다. 스크린 리더에 의존하는 사용자를 위한 접근성 높은 업로드 위젯을 제공합니다.

filepond는 어떻게 설치하나요?

npm에서 FilePond를 설치합니다: npm install filepond FilePond를 가져와 여러 파일을 업로드하는 컴포넌트를 만듭니다: import * as FilePond from 'filepond'; 컴포넌트를 DOM에 추가합니다

filepond은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pqina/filepond