アップロードの処理

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

export default function MyComponent() {
  const [fileUrl, setFileUrl] = useState('');

  const handleUploadFinish = (result) => {
    // 'result' オブジェクトは、バックエンドからのJSONレスポンスです
    console.log('Upload finished:', result);

    // 'result.data' には、サーバーから返されたボディが含まれます
    if (result.data && result.data.url) {
      setFileUrl(result.data.url);
    }
  };

  return (
    <div>
      <Uploader onUploadFinish={handleUploadFinish} />
      {fileUrl && (
        <div>
          <p>アップロード成功！</p>
          <img src={fileUrl} alt="アップロードされたコンテンツ" width="200" />
        </div>
      )}
    </div>
  );
}

{
  "uploadURL": "http://localhost:3030/api/uploads/f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
  "data": {
    "url": "http://localhost:3030/api/uploads/f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
    "_id": "z2k...",
    "mimetype": "image/png",
    "originalname": "screenshot.png",
    "filename": "f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
    "size": 123456,
    "folderId": "component_did",
    "createdBy": "user_did",
    "updatedBy": "user_did",
    "createdAt": "2023-10-27T10:00:00.000Z",
    "updatedAt": "2023-10-27T10:00:00.000Z"
  },
  "method": "POST",
  "url": "http://localhost:3030/api/uploads/f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
  "status": 200,
  "headers": { ... },
  "file": { ... } // Uppyファイルオブジェクト
}

(req: Request, res: Response, uploadMetadata: object) => Promise<any>

import { initLocalStorageServer } from '@blocklet/uploader-server';
import express from 'express';
import { joinUrl } from 'url-join';

// 'Upload' がデータベースモデルであると仮定します
import Upload from '../models/upload';

const app = express();

const localStorageServer = initLocalStorageServer({
  path: process.env.UPLOAD_DIR,
  express,
  onUploadFinish: async (req, res, uploadMetadata) => {
    const {
      id: filename, // ディスク上の一意なハッシュ化されたファイル名
      size,
      metadata: { filename: originalname, filetype: mimetype },
    } = uploadMetadata;

    // ファイルの公開URLを構築します
    const fileUrl = joinUrl(process.env.APP_URL, '/api/uploads', filename);

    // ファイルメタデータをデータベースに保存します
    const doc = await Upload.insert({
      mimetype,
      originalname,
      filename, // ハッシュ化されたファイル名
      size,
      folderId: req.componentDid, // アップロードが発生したコンポーネントのDID
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      createdBy: req.user.did, // ユーザー認証ミドルウェアを想定しています
      updatedBy: req.user.did,
    });

    // 返されたオブジェクトはJSONレスポンスとしてフロントエンドに送信されます
    const responseData = { url: fileUrl, ...doc };

    return responseData;
  },
});

// uploaderミドルウェアをマウントします
app.use('/api/uploads', localStorageServer.handle);

{
  "id": "f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
  "size": 123456,
  "offset": 123456,
  "is_final": true,
  "metadata": {
    "relativePath": null,
    "name": "screenshot.png",
    "filename": "screenshot.png",
    "type": "image/png",
    "filetype": "image/png",
    "uploaderId": "Uploader"
  },
  "runtime": {
    "relativePath": null,
    "absolutePath": "/path/to/uploads/f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
    "size": 123456,
    "hashFileName": "f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6.png",
    "originFileName": "screenshot.png",
    "type": "image/png",
    "fileType": "image/png"
  }
}