フロントエンドの設定 (@blocklet/uploader)

pnpm add @blocklet/uploader

// Uppy のコアとプラグインのスタイルをインポート
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';
import '@uppy/image-editor/dist/style.min.css';
import '@uppy/drag-drop/dist/style.min.css';
import '@uppy/drop-target/dist/style.min.css';
import '@uppy/status-bar/dist/style.min.css';

// ... アプリケーションのエントリーファイルの残りの部分

import { lazy, useRef, Suspense } from 'react';

// Uploader コンポーネントを遅延インポート
const UploaderComponent = lazy(() => import('@blocklet/uploader').then((res) => ({ default: res.Uploader })));

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

  const handleUploadFinish = (result) => {
    // 'result' オブジェクトには、アップロードされたファイルの詳細が含まれています
    console.log('Upload successful!', result);
    // これで result.uploadURL または result.data からファイル URL を使用できます
    alert(`File uploaded to: ${result.uploadURL}`);
  };

  const openUploader = () => {
    // アップローダーインスタンスには `open` メソッドがあります
    uploaderRef.current?.getUploader()?.open();
  };

  return (
    <div>
      <button type="button" onClick={openUploader}>
        Open Uploader
      </button>

      {/* Uploader コンポーネントはレンダリングされますが、開かれるまで非表示です */}
      {/* Suspense を使用してコンポーネントの遅延ロードを処理します */}
      <Suspense fallback={<div>Loading...</div>}>
        <UploaderComponent
          ref={uploaderRef}
          popup // このプロップはアップローダーをモーダルダイアログにします
          onUploadFinish={handleUploadFinish}
        />
      </Suspense>
    </div>
  );
}

import { UploaderProvider, UploaderTrigger } from '@blocklet/uploader';

function MyPageComponent() {
  return (
    <div>
      <h2>My Page</h2>
      <p>Click the button below to upload a file.</p>
      {/* UploaderTrigger はクリック時にアップローダーを開くシンプルなラッパーです */}
      <UploaderTrigger>
        <button type="button">Upload File</button>
      </UploaderTrigger>
    </div>
  );
}

export default function App() {
  const handleUploadFinish = (result) => {
    console.log('File uploaded from Provider:', result.uploadURL);
  };

  return (
    // アプリケーションまたはその一部を UploaderProvider でラップします
    <UploaderProvider popup onUploadFinish={handleUploadFinish}>
      <h1>My Application</h1>
      <MyPageComponent />
      {/* ここに別のトリガーを置くこともできます */}
      <UploaderTrigger>
        <a>Or click this link</a>
      </UploaderTrigger>
    </UploaderProvider>
  );
}