リモートソースの統合 (Companion)

ユーザーが直接のURLやUnsplashのようなサービスなどの外部ソースからファイルをインポートできるようにするには、バックエンドにUppyのCompanionサービスをセットアップする必要があります。@blocklet/uploader-server パッケージは、このプロセスを簡素化する便利な initCompanion 関数を提供します。

Companionはサーバーサイドのプロキシとして機能します。ユーザーに代わってリモートプロバイダーからファイルを取得し、それをフロントエンドのアップローダーコンポーネントにストリーミングします。その後、通常のアップロードプロセスが進行します。基本的なファイルのアップロードはカスタムバックエンドなしで処理できますが、リモートソースを有効にするには @blocklet/uploader-server パッケージのセットアップが必要です。

仕組み

次の図は、ユーザーがリモートソースからファイルをインポートするときのデータフローを示しています：

ステップ1: バックエンドミドルウェアの設定

まず、blockletのバックエンドExpressサーバーでCompanionミドルウェアを初期化してマウントする必要があります。これには initCompanion を呼び出してルーターに追加することが含まれます。

Server-side Companion Setup

import express from 'express';
import { initCompanion } from '@blocklet/uploader-server';

const router = express.Router();

// リモートソース用のCompanionミドルウェア
const companion = initCompanion({
  path: env.uploadDir, // ファイル処理用の一時ディレクトリ
  express,
  providerOptions: {
    // ここでプロバイダーを設定します。例: Unsplash
    unsplash: {
      key: process.env.UNSPLASH_KEY,
      secret: process.env.UNSPLASH_SECRET,
    },
  },
  uploadUrls: [env.appUrl], // あなたのblockletの公開URL
});

// 特定のルートにcompanionハンドラーをマウントします
router.use('/companion', companion.handle);

initCompanion のオプション

ステップ2: フロントエンドコンポーネントの設定

バックエンドを設定した後、フロントエンドの <Uploader /> コンポーネントをCompanionインスタンスと通信するように設定する必要があります。これは apiPathProps プロパティでルートを指定し、目的のプラグインを有効にすることで行います。

Uploader Component with Companion

import { Uploader } from '@blocklet/uploader';

function MyUploaderComponent() {
  return (
    <Uploader
      popup
      apiPathProps={{
        // このパスはバックエンドのルートと一致する必要があります
        companion: '/api/companion',
        // 最終的なアップロードのためのuploaderパス
        uploader: '/api/uploads',
      }}
      plugins={[
        'Url', // 直接URLからのインポートを有効にします
        'Unsplash', // Unsplashからのインポートを有効にします
        'Webcam',
      ]}
    />
  );
}

バックエンドミドルウェアとフロントエンドコンポーネントの両方が設定されると、Uploaderのダッシュボードに「Link」(URL) と「Unsplash」のタブが表示され、ユーザーはこれらのソースから直接ファイルをインポートできるようになります。

ローカルソースとリモートソースの両方からのアップロードを処理できるようになったので、アップローダーの機能をさらに拡張したいと思うかもしれません。次のガイドで、Uploaderインターフェースに独自のカスタムタブを追加する方法を学びましょう。