pqina/filepond

これは何？

主な機能

• 01ドラッグ＆ドロップ、ファイル選択ダイアログ、貼り付け、API経由でファイル、ディレクトリ、リモートURL、Data URIを追加できます。
• 02チャンク単位およびAJAXでのアップロードに対応し、フォーム送信時のbase64エンコードも利用できます。
• 03アップロード前に画像をリサイズ、トリミング、フィルタリングし、EXIFの向きを補正できます。
• 04キーボードで操作でき、VoiceOverやJAWSを含むスクリーンリーダーでテスト済みです。
• 05プレビュー、検証、メタデータなどのプラグインで機能を拡張できます。

ユースケース

• クライアント側でリサイズしながら、Webアプリにアバターや写真のアップロード機能を追加する。
• 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 は何に使えますか？

クライアント側でリサイズしながら、Webアプリにアバターや写真のアップロード機能を追加する。 React、Vue、Angular、Svelteのプロジェクトに複数ファイルをアップロードするフォームを組み込む。 ブラウザーからバックエンドサーバーへ大容量ファイルをチャンク単位でアップロードする。 スクリーンリーダーを利用するユーザー向けに、アクセシブルなアップロードウィジェットを提供する。

filepond のインストール方法は？

npmからFilePondをインストールする: npm install filepond FilePondをインポートし、複数ファイルのアップロードコンポーネントを作成する: import * as FilePond from 'filepond'; コンポーネントをDOMに追加する

filepond はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pqina/filepond