メインコンテンツまでスキップ

Dropupの仕組み

DropupはヘッドレスUIの概念に基づいて構築されています - 複雑なファイルアップロードロジックをすべて処理しながら、視覚的な表現を完全に制御できます。

アーキテクチャ​

┌─────────────────────────────────────────────────────────────┐
│                     Your React Component                     │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Drop Zone   │  │ File List   │  │ Upload Button       │  │
│  │ (your UI)   │  │ (your UI)   │  │ (your UI)           │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup Hook                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │Validation │ │  State    │ │  Upload   │ │ Platform│  ││
│  │  │  Engine   │ │ Manager   │ │  Engine   │ │ Adapter │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

主要コンポーネント​

1. State Manager​

Dropupは、予測可能な状態管理のためにReactのuseReducerを使用します:

  • すべてのファイルとそのステータスを追跡
  • ドラッグ状態を管理
  • アップロード進捗を処理
  • 計算された値を提供

2. Validation Engine​

ファイルが追加される前に、検証を通過する必要があります:

const { files } = useDropup({
  accept: 'image/*',           // ファイルタイプ検証
  maxSize: 5 * 1024 * 1024,    // 最大ファイルサイズ
  minSize: 1024,               // 最小ファイルサイズ
  maxFiles: 10,                // 最大ファイル数
  maxWidth: 4096,              // 最大画像幅
  maxHeight: 4096,             // 最大画像高さ
  customRules: [               // カスタム検証
    (file) => file.name.length < 100 || 'ファイル名が長すぎます'
  ],
});

3. Upload Engine​

アップロードエンジンは以下を処理します:

  • シンプルアップロード（ファイルごとに1つのリクエスト）
  • チャンクアップロード（大きなファイルを分割）
  • 指数バックオフを使用した再試行ロジック
  • 同時アップロード管理
  • 進捗追跡

4. Platform Adapter​

Dropupは複数のプラットフォームで動作します:

  • Web - ネイティブブラウザAPIを使用
  • React Native - ネイティブファイルハンドリングを使用
  • SSR - サーバーサイドレンダリングに安全

データフロー​

User Action → Validation → State Update → Upload → Callbacks
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  Select/     Accept/Reject   files[]    XHR/Fetch   onComplete
  Drop files                  Updated    Progress    onError

設計原則​

1. ヘッドレスファースト​

組み込みのUIコンポーネントなし - 必要なものを正確に構築できます:

// UIを完全に制御
<div {...getDropProps()}>
  <YourCustomDropZone />
  <input {...getInputProps()} />
</div>

2. 型安全性​

包括的な型を持つ完全なTypeScriptサポート:

import type { DropupFile, UseDropupOptions } from '@samithahansaka/dropup';

const options: UseDropupOptions = {
  accept: 'image/*',
  onUploadComplete: (file: DropupFile) => {
    console.log(file.uploadedUrl);
  },
};

3. ツリーシェイク可能​

必要なものだけをインポート:

// コアのみ（約10KB）
import { useDropup } from '@samithahansaka/dropup';

// 必要に応じてクラウドサポートを追加
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// 必要に応じて画像処理を追加
import { compressImage } from '@samithahansaka/dropup/image';

4. プログレッシブエンハンスメント​

シンプルに始めて、必要に応じて機能を追加:

// 基本的な使い方
const { files } = useDropup();

// 検証を追加
const { files } = useDropup({ maxSize: 10_000_000 });

// 自動アップロードを追加
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// クラウドストレージを追加
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});