フロントエンド: @blocklet/uploader

@blocklet/uploader パッケージは、Blockletエコシステム内でファイルアップロードを処理するための、強力で高度にカスタマイズ可能なReactコンポーネントを提供します。洗練されたモジュール式のオープンソースファイルアップローダーである Uppy をベースに構築されており、堅牢でユーザーフレンドリーな体験を保証します。

このパッケージは、どのReactアプリケーションでもスタンドアロンコンポーネントとしてシームレスに動作するように設計されています。しかし、その真価は、Media Kit blocklet と組み合わせて使用することで発揮されます。Media Kit blockletは、一元的なファイル管理、AI画像生成などの高度な機能、および事前設定された設定を提供します。

アーキテクチャ概要

Uploaderコンポーネントは、Uppyインスタンスのオーケストレーターとして機能します。Uppyのコアロジックと、一連の標準プラグイン（WebcamやURLインポートなど）およびBlocklet環境に合わせたカスタムプラグイン（AI画像やリソースなど）を組み合わせています。このモジュラーアーキテクチャにより、高い柔軟性と豊富な機能が実現されます。

コアコンセプト

このパッケージは、アップローダーを統合するための2つの主要な方法を公開しています:

直接コンポーネント:
<Uploader /> コンポーネントは、アプリケーションに直接レンダリングできます。インラインまたはモーダルダイアログとして表示するように設定できます。
プロバイダーパターン:
より複雑なユースケースでは、<UploaderProvider /> と <UploaderTrigger /> コンポーネントを使用すると、ボタンクリックなど、アプリケーションの任意の部分からプログラムでアップローダーを開くことができます。

基本的な使用法

以下は、Uploaderをポップアップモーダルとしてレンダリングする最小限の例です。refを使用して、そのopenおよびcloseメソッドにアクセスします。

基本的なUploaderの例

import { useRef } from 'react';
import Uploader from '@blocklet/uploader';
import Button from '@mui/material/Button';

export default function MyComponent() {
  const uploaderRef = useRef(null);

  const handleOpen = () => {
    uploaderRef.current?.open();
  };

  return (
    <div>
      <Button onClick={handleOpen}>Uploaderを開く</Button>
      <Uploader ref={uploaderRef} popup={true} />
    </div>
  );
}

この簡単なセットアップで、クリックすると全機能のUploaderモーダルが開くボタンがレンダリングされます。

APIリファレンスの詳細

@blocklet/uploader の能力を最大限に活用するには、そのコンポーネント、フック、およびユーティリティに関する詳細なAPIドキュメントを参照してください。

<Uploader /> コンポーネントのProps

Uploaderコンポーネントの全プロパティ（コア設定、ダッシュボードオプション、プラグイン設定など）をご覧ください。

<UploaderProvider /> とフック

UploaderProviderとフックを使用して、アプリのどこからでもプログラムでアップローダーを制御する方法を学びます。

利用可能なプラグイン

AI画像生成、アップロード済みファイル、リソースなど、アップローダーの機能を強化するカスタムビルドのプラグインをご覧ください。

ユーティリティ関数

ファイル変換、URL生成、Uppyインスタンスの操作などのタスクのためのヘルパー関数のリファレンスです。

これらの構成要素を理解することで、アプリケーションのニーズに完全に合うようにアップローダーを調整できます。完全なファイルアップロードソリューションを実現するには、@blocklet/uploader-server のドキュメントで説明されているように、対応するバックエンドサービスも設定することを忘れないでください。