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

Dropupを始める

Dropupは、軽量でヘッドレスなReactファイルアップロードライブラリです。複雑なアップロードロジックをすべて処理しながら、UIを完全に制御できます。

なぜDropupなのか?​

  • 🪶 軽量 - コアはgzip圧縮後わずか約10KB
  • 🎨 ヘッドレス - フックベースのAPIで、UIを完全に制御
  • 📁 ドラッグ&ドロップ - ドラッグ&ドロップサポートを内蔵
  • 📊 進捗追跡 - 各ファイルのリアルタイムアップロード進捗
  • 🔄 チャンクアップロード - 大きなファイルを分割して信頼性の高いアップロードを実現
  • ☁️ クラウド対応 - S3、GCS、Azure用の事前構築済みヘルパー
  • 🖼️ 画像処理 - 圧縮とプレビュー生成を内蔵
  • 📱 クロスプラットフォーム - React DOMとReact Nativeで動作
  • 🔒 TypeScript - 完全なTypeScriptサポート

インストール​

お好みのパッケージマネージャーを使用してDropupをインストールします:

npm install @samithahansaka/dropup

ピア依存関係​

Dropupにはフックサポートのため、React 16.8以上が必要です:

npm install react

クイックスタート​

以下は、開始するための簡単な例です:

import { useDropup } from '@samithahansaka/dropup';

function FileUploader() {
  const {
    files,
    state,
    actions,
    getDropProps,
    getInputProps
  } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
  });

  return (
    <div>
      {/* ドロップゾーン */}
      <div
        {...getDropProps()}
        style={{
          border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
          padding: 40,
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <input {...getInputProps()} />
        <p>ここにファイルをドラッグ&ドロップするか、クリックして選択してください</p>
      </div>

      {/* ファイルリスト */}
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            {file.name} - {file.status}
            {file.status === 'uploading' && ` (${file.progress}%)`}
            <button onClick={() => actions.remove(file.id)}>削除</button>
          </li>
        ))}
      </ul>

      {/* アップロードボタン */}
      {files.length > 0 && (
        <button onClick={() => actions.upload()}>
          すべてアップロード
        </button>
      )}
    </div>
  );
}

コアコンセプト​

1. useDropup フック​

useDropupフックは、メインのエントリーポイントです。ファイルアップロードUIを構築するために必要なすべてを返します:

const {
  files,           // ステータス、進捗などを含むファイルの配列
  state,           // 全体的な状態（isDragging、isUploading、progress）
  actions,         // アップロード、削除、キャンセル、リセットのメソッド
  getDropProps,    // ドロップゾーン要素用のprops
  getInputProps,   // 非表示のファイル入力用のprops
} = useDropup(options);

2. ファイルオブジェクト​

files配列内の各ファイルには以下が含まれます:

{
  id: string;          // 一意の識別子
  file: File;          // 元のFileオブジェクト
  name: string;        // ファイル名
  size: number;        // バイト単位のファイルサイズ
  type: string;        // MIMEタイプ
  preview?: string;    // プレビューURL（画像の場合）
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // アップロード進捗（0-100）
  error?: Error;       // アップロード失敗時のエラーオブジェクト
  uploadedUrl?: string; // アップロード成功後のURL
}

3. アクション​

actionsオブジェクトは、アップロードを制御するメソッドを提供します:

actions.upload(fileIds?)    // アップロードを開始（すべてまたは特定のファイル）
actions.cancel(fileId?)     // アップロードをキャンセル
actions.remove(fileId)      // リストからファイルを削除
actions.reset()             // すべてのファイルをクリア
actions.retry(fileIds?)     // 失敗したアップロードを再試行

アップロードの設定​

実際のアップロードを有効にするには、アップロード設定を提供します:

const { files } = useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },
  autoUpload: true, // ファイル追加時に自動的にアップロード
});

次のステップ​