はじめに
「ファイルアップロードのUIだけ、なぜか毎回時間を溶かしてしまう」——そんな経験はないでしょうか。素の <input type="file"> はそっけない見た目ですし、ドラッグ&ドロップ対応、画像プレビュー、複数ファイル選択、進捗表示、バリデーションと機能を積み上げていくと、あっという間に自前実装が肥大化してしまいます。
FilePondは、こうした「地味だけど面倒」なファイルアップロードUIを、宣言的な設定とプラグインの組み合わせだけで解決してくれるJavaScriptライブラリです。今回はFilePondの特徴から、ブラウザ上で実際に動かせるサンプルを交えた実践的な使い方までを紹介します。
FilePondとは
FilePondは、PQINAが開発しているファイルアップロード用のJavaScriptライブラリです。フレームワークに依存しないコアライブラリに加えて、React・Vue・Angular・Svelte向けの公式アダプターも用意されており、既存のプロジェクトに組み込みやすいのが特徴です。
主な特徴
- ドラッグ&ドロップとクリック選択の両対応 - 特別な実装なしにモダンなアップロードUIが手に入ります
- 豊富なプラグイン群 - 画像プレビュー、画像編集、ファイルタイプ・サイズのバリデーションなど、必要な機能だけを組み合わせられます
- なめらかなアニメーション - ファイルの追加・削除・並び替えがアニメーション付きで表示され、ユーザー体験を損ないません
- 柔軟なサーバー連携 -
process/revert/loadなどのフックを自分で実装でき、アップロード先のAPI仕様に合わせて自由にカスタマイズできます - アクセシビリティ対応 - キーボード操作やスクリーンリーダーにも配慮された実装になっています
インストール
npmから core パッケージをインストールします。
npm install filepond
画像プレビューやバリデーションなど、必要に応じてプラグインを追加します。
npm install filepond-plugin-image-preview filepond-plugin-file-validate-type
Reactで使う場合は公式アダプターも利用できます。
npm install react-filepond
基本的な使い方
FilePondは対象の <input type="file"> 要素を FilePond.create() に渡すだけで、ドラッグ&ドロップ対応のアップロードUIに変換してくれます。まずは最小構成で動かしてみましょう。
たったこれだけで、ドラッグ&ドロップ・クリック選択・ファイルの削除アニメーションまで一通り揃ったUIが完成します。
実践的なユースケース
画像プレビュー付きのアップロード
画像ファイルを扱う場面では、選択直後にサムネイルを表示できると利便性が大きく上がります。filepond-plugin-image-preview と filepond-plugin-file-validate-type を組み合わせれば、画像プレビューとファイル形式のバリデーションを同時に実現できます。
画像を選択すると、その場でサムネイルが表示されるのが分かります。対応していない形式のファイルを選ぶと、バリデーションメッセージが表示されます。
アップロード進捗の表示
実際のアップロードでは、サーバーへ送信中の進捗をユーザーに示したいものです。FilePondは server.process フックに関数を渡すことで、進捗の通知やアップロードの中断処理を自由に実装できます。ここではサーバー通信の代わりに、擬似的な進捗を発生させています。
ファイルを追加すると、擬似的なアップロードバーが進んでいく様子が確認できます。実際のプロジェクトでは、この process 関数の中で fetch などを使ってサーバーにファイルを送信し、レスポンスに応じて load・error を呼び出す形になります。
複数ファイルの選択と並び替え
複数の画像をまとめてアップロードするフォームでは、選択後に順序を入れ替えたい、上限数を設けたいといった要望がよくあります。allowMultiple・maxFiles・allowReorder を組み合わせるだけで対応できます。
3ファイルまで選択でき、追加したファイルはドラッグで並び替えられます。上限を超えて選択しようとすると自動的に制限されます。
まとめ
FilePondを使うと、ドラッグ&ドロップ・画像プレビュー・進捗表示・複数ファイル管理といったファイルアップロードUIに必要な要素を、プラグインの組み合わせだけで手早く実装できます。素の <input type="file"> から自前で作り込んでいた処理をFilePondに任せることで、UIの実装コストを大きく減らし、本質的なサーバー連携部分に集中できるようになります。
まずは今回のサンプルを手元で編集しながら、プロジェクトに必要なプラグインを探してみてください。