@blocklet/uploaderは、コアのUppyライブラリを、いくつかの強力なカスタムビルドプラグインで拡張します。これらのプラグインは、Blockletエコシステム、特にMedia Kitとシームレスに統合され、AI画像生成、以前にアップロードされたファイルの閲覧、共有リソースへのアクセスなどの機能を提供します。これらのプラグインのほとんどは、<Uploader />コンポーネントを使用し、適切に設定されたバックエンドが利用可能な場合に自動的に有効になります。
このドキュメントは、パッケージに含まれるカスタムプラグインのリファレンスを提供します。
Acquirerプラグイン (UIタブ)
これらのプラグインは、Uploaderダッシュボードにタブとして表示され、ユーザーがファイルを選択または作成するためのさまざまな方法を提供します。
Uploaded
Uploadedプラグインは、ユーザーが以前にMedia Kitにアップロードしたファイルを参照、検索、選択できるタブを提供します。これは、既存のアセットを再アップロードすることなく再利用するための重要なツールです。
主な機能:
- 無限スクロール: ユーザーがスクロールするにつれてサーバーからファイルを遅延読み込みし、大規模なライブラリでも効率的なパフォーマンスを保証します。
- リッチプレビュー: 画像、動画、PDFのプレビューをグリッドビューに直接レンダリングします。
- クイックアップロード: 新しいアップロードのために「マイデバイス」タブに素早く切り替えるための専用の「追加」ボタンが含まれています。
使用方法
このプラグインは、UploaderがアクティブなMedia Kitを検出するとデフォルトで有効になります。uploaderOptionsを介して、そのタイトルをカスタマイズしたり、バックエンドAPIに追加のパラメータを渡したりすることができます。
uploaderOptions.js
<Uploader
uploaderOptions={{
plugins: {
Uploaded: {
title: 'マイメディアライブラリ', // タブのタイトルを変更
params: { customParam: 'value' } // カスタムクエリパラメータをAPIに渡す
}
}
}}
/>Resources
Resourcesプラグインを使用すると、ユーザーはキュレーションされた静的アセットのリストから選択できます。これらのアセットは、他のBlockletによって提供されたり、アプリケーションのバックエンドで定義されたりすることができ、ロゴ、アイコン、ドキュメントテンプレートなどの共通ファイルを簡単に共有できます。
主な機能:
- コンポーネントフィルタリング: 複数のリソースソース（コンポーネント）が利用可能な場合、それらはフィルターボタンとして表示され、ユーザーは異なるアセットコレクションを切り替えることができます。
- グリッドビュー: リソースをクリーンでナビゲートしやすいグリッドで表示します。
使用方法
このプラグインは、バックエンドがリソースを提供するように設定されている場合にアクティブになります。Uploaderのオプションでタイトルをカスタマイズできます。
uploaderOptions.js
<Uploader
uploaderOptions={{
plugins: {
Resources: {
title: '共有アセット' // タブのタイトルを変更
}
}
}}
/>AI Image
生成AIをアップロードワークフローに直接統合します。AI Imageプラグインは、ユーザーがバックエンドで設定されたさまざまなAIモデルを使用して、テキストプロンプトから画像を生成するための専用インターフェースを提供します。
主な機能:
- プロンプトインターフェース: プロンプトを作成し、モデルを選択するための使いやすいパネル。
- モデルフィルタリング:
window.blocklet.preferences.supportModels設定に基づいて利用可能なAIモデルを自動的にフィルタリングし、ユーザーに関連するオプションのみが表示されるようにします。 - 画像ギャラリー: 生成された画像を表示し、選択してUploaderにインポートします。
使用方法
このプラグインは、Media KitがAI画像生成機能で設定されている場合に利用可能です。
uploaderOptions.js
<Uploader
uploaderOptions={{
plugins: {
AIImage: {
title: 'AIで作成' // タブのタイトルを変更
}
}
}}
/>ユーティリティおよびバックグラウンドプラグイン
これらのプラグインは、機能性、セキュリティ、信頼性を向上させるためにバックグラウンドで動作します。ダッシュボードには表示されるUIタブがありません。
PrepareUpload (内部プラグイン)
これは、Uploaderに追加されたすべてのファイルに対して自動的に実行される重要なバックグラウンドプラグインです。アップロードが開始される前に、ファイルが安全で、正しくフォーマットされ、最適化されていることを確認するための重要な前処理タスクを実行します。
| Feature | Description |
|---|---|
| XSS防止 | SVGファイルとファイル名をサニタイズして、潜在的に悪意のあるスクリプトを削除し、アプリケーションをクロスサイトスクリプティング攻撃から保護します。 |
| Zip爆弾防止 | 圧縮ファイル（.zip、.gz）を検査し、サーバーリソースを枯渇させる可能性のある解凍爆弾が含まれていないことを確認します。 |
| 画像の向き | EXIFメタデータに基づいて画像の向きを自動的に修正し、横向きや逆さまの写真を防ぎます。 |
| リモートファイルの処理 | リモートソース（UnsplashやCompanion経由のURLなど）からファイルをブラウザにダウンロードし、ローカルファイルのように処理およびアップロードできるようにします。 |
| ファイル名のハッシュ化 | ファイルのコンテンツのハッシュに基づいて一意のファイル名を生成し、キャッシングや命名競合の防止に役立ちます。 |
| 画像の検証 | アスペクト比を強制するように設定でき、ファイルが必要な寸法と一致しない場合に画像エディタを自動的に開きます。 |
使用方法
PrepareUploadプラグインはデフォルトで有効になっています。通常は設定する必要はありませんが、cropperOptionsなどのオプションを渡して、アップロードされるすべての画像に特定のアスペクト比を強制することができます。
uploaderOptions.js
<Uploader
uploaderOptions={{
plugins: {
PrepareUpload: {
cropperOptions: {
aspectRatio: 16 / 9
}
}
}
}}
/>SafariPastePlugin
これは、特定のブラウザ互換性の問題に対処する小さなユーティリティプラグインです。他のブラウザとは異なる方法で貼り付けイベントを処理するSafariで、Uploaderダッシュボードへのファイルの貼り付けが正しく機能することを保証します。このプラグインはデフォルトで有効になっており、設定は不要です。
VirtualPlugin
VirtualPluginは機能プラグインではなく、開発者向けのベースクラスです。これにより、完全なUppy UIプラグインをゼロから作成することなく、独自のカスタムacquirer（ダッシュボードの新しいタブ）を作成するプロセスが簡素化されます。