オプションリファレンス

useDropupフックのすべての設定オプション。

検証オプション

accept

受け入れるファイルタイプ。

// 単一のMIMEタイプ
useDropup({ accept: 'image/png' });

// 複数のMIMEタイプ
useDropup({ accept: 'image/png, image/jpeg, image/gif' });

// ワイルドカード
useDropup({ accept: 'image/*' });

// 拡張子で
useDropup({ accept: '.pdf, .doc, .docx' });

// 配列形式
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });

タイプ	デフォルト
`string \| string[]`	`undefined`（すべてのファイル）

maxSize

最大ファイルサイズ（バイト単位）。

useDropup({ maxSize: 10 * 1024 * 1024 }); // 10MB

タイプ	デフォルト
`number`	`undefined`（制限なし）

minSize

最小ファイルサイズ（バイト単位）。

useDropup({ minSize: 1024 }); // 最小1KB

タイプ	デフォルト
`number`	`undefined`（制限なし）

maxFiles

許可する最大ファイル数。

useDropup({ maxFiles: 5 });

タイプ	デフォルト
`number`	`undefined`（制限なし）

maxWidth / maxHeight

最大画像サイズ（ピクセル単位）。

useDropup({
  accept: 'image/*',
  maxWidth: 4096,
  maxHeight: 4096,
});

タイプ	デフォルト
`number`	`undefined`（制限なし）

minWidth / minHeight

最小画像サイズ（ピクセル単位）。

useDropup({
  accept: 'image/*',
  minWidth: 100,
  minHeight: 100,
});

タイプ	デフォルト
`number`	`undefined`（制限なし）

customRules

カスタム検証関数。

useDropup({
  customRules: [
    // 同期検証
    (file) => {
      if (file.name.includes('draft')) {
        return 'ドラフトファイルは許可されていません';
      }
      return true;
    },
    // 非同期検証
    async (file) => {
      const exists = await checkServerDuplicate(file);
      return exists ? 'ファイルは既に存在します' : true;
    },
  ],
});

タイプ	デフォルト
`ValidationRule[]`	`[]`

ValidationRule型:

type ValidationRule = (file: File) => boolean | string | Promise<boolean | string>;

動作オプション

multiple

複数ファイルの選択を許可。

useDropup({ multiple: true });  // 複数ファイル
useDropup({ multiple: false }); // 単一ファイルのみ

タイプ	デフォルト
`boolean`	`true`

disabled

ドロップゾーンを無効化。

useDropup({ disabled: true });

タイプ	デフォルト
`boolean`	`false`

autoUpload

ファイル追加時に自動的にアップロードを開始。

useDropup({
  upload: { url: '/api/upload' },
  autoUpload: true,
});

タイプ	デフォルト
`boolean`	`false`

generatePreviews

画像ファイルのプレビューURLを生成。

useDropup({ generatePreviews: true });

// プレビューにアクセス
files[0].preview // "blob:http://..."

タイプ	デフォルト
`boolean`	`true`

アップロード設定

upload

アップロード先と動作を設定。

URLベースの設定

useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
    fieldName: 'file',
    withCredentials: true,
    timeout: 30000,
  },
});

UploadConfigプロパティ:

プロパティ	タイプ	デフォルト	説明
`url`	`string`	必須	アップロードエンドポイントURL
`method`	`string`	`'POST'`	HTTPメソッド
`headers`	`Record<string, string>`	`{}`	リクエストヘッダー
`fieldName`	`string`	`'file'`	ファイルのフォームフィールド名
`withCredentials`	`boolean`	`false`	Cookieを含める
`timeout`	`number`	`0`	リクエストタイムアウト（ミリ秒）
`data`	`Record<string, unknown>`	`{}`	追加のフォームデータ

カスタムアップローダー

useDropup({
  upload: async (file, options) => {
    const formData = new FormData();
    formData.append('file', file.file);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      signal: options.signal,
    });

    const data = await response.json();
    return { url: data.url };
  },
});

CustomUploader型:

type CustomUploader = (
  file: DropupFile,
  options: UploadOptions
) => Promise<UploadResult>;

interface UploadOptions {
  signal: AbortSignal;
  onProgress: (progress: number) => void;
}

interface UploadResult {
  url?: string;
  response?: unknown;
}

クラウドアップローダー

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3-presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name, type: file.type }),
      });
      return res.json();
    },
  }),
});

コールバックオプション

onFilesAdded

ファイルが追加されたとき（検証後）に呼び出されます。

useDropup({
  onFilesAdded: (files) => {
    console.log('追加:', files.map(f => f.name));
  },
});

タイプ
`(files: DropupFile[]) => void`

onFileRemoved

ファイルが削除されたときに呼び出されます。

useDropup({
  onFileRemoved: (file) => {
    console.log('削除:', file.name);
  },
});

タイプ
`(file: DropupFile) => void`

onValidationError

ファイルが検証に失敗したときに呼び出されます。

useDropup({
  accept: 'image/*',
  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

タイプ
`(errors: ValidationError[]) => void`

onUploadStart

ファイルのアップロードが開始されたときに呼び出されます。

useDropup({
  onUploadStart: (file) => {
    console.log('アップロード開始:', file.name);
  },
});

タイプ
`(file: DropupFile) => void`

onUploadProgress

アップロード進捗中に呼び出されます。

useDropup({
  onUploadProgress: (file, progress) => {
    console.log(`${file.name}: ${progress}%`);
  },
});

タイプ
`(file: DropupFile, progress: number) => void`

onUploadComplete

ファイルのアップロードが完了したときに呼び出されます。

useDropup({
  onUploadComplete: (file, response) => {
    console.log('アップロード完了:', file.uploadedUrl);
    console.log('サーバーレスポンス:', response);
  },
});

タイプ
`(file: DropupFile, response: unknown) => void`

onUploadError

ファイルのアップロードが失敗したときに呼び出されます。

useDropup({
  onUploadError: (file, error) => {
    console.error(`失敗: ${file.name}`, error.message);
  },
});

タイプ
`(file: DropupFile, error: DropupError) => void`

onAllComplete

すべてのファイルのアップロードが完了したときに呼び出されます。

useDropup({
  onAllComplete: (files) => {
    const successful = files.filter(f => f.status === 'complete');
    console.log(`${successful.length}/${files.length}件が正常にアップロードされました`);
  },
});

タイプ
`(files: DropupFile[]) => void`

完全な例

const { files, actions, state, getDropProps, getInputProps } = useDropup({
  // 検証
  accept: ['image/*', 'application/pdf'],
  maxSize: 10 * 1024 * 1024,
  maxFiles: 5,

  // 動作
  multiple: true,
  autoUpload: false,
  generatePreviews: true,

  // アップロード
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
    },
  },

  // コールバック
  onFilesAdded: (files) => {
    toast.info(`${files.length}個のファイルが追加されました`);
  },
  onValidationError: (errors) => {
    toast.error(`${errors.length}個のファイルが拒否されました`);
  },
  onUploadProgress: (file, progress) => {
    console.log(`${file.name}: ${progress}%`);
  },
  onUploadComplete: (file) => {
    toast.success(`${file.name}がアップロードされました！`);
  },
  onUploadError: (file, error) => {
    toast.error(`${file.name}が失敗しました: ${error.message}`);
  },
  onAllComplete: (files) => {
    const count = files.filter(f => f.status === 'complete').length;
    toast.success(`すべて完了！${count}個のファイルがアップロードされました。`);
  },
});

検証オプション​

accept​

maxSize​

minSize​

maxFiles​

maxWidth / maxHeight​

minWidth / minHeight​

customRules​

動作オプション​

multiple​

disabled​

autoUpload​

generatePreviews​

アップロード設定​

upload​

URLベースの設定​

カスタムアップローダー​

クラウドアップローダー​

コールバックオプション​

onFilesAdded​

onFileRemoved​

onValidationError​

onUploadStart​

onUploadProgress​

onUploadComplete​

onUploadError​

onAllComplete​

完全な例​