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

よくある質問

Dropupに関する一般的な質問と回答。

全般​

Dropupとは何ですか？​

Dropupは、ファイルアップロード用の軽量でヘッドレスなReactライブラリです。ドラッグ&ドロップ機能、ファイル検証、アップロード進捗追跡、クラウドストレージのサポートを提供し、すべてgzip圧縮後10KB未満のパッケージに収まっています。

なぜ「ヘッドレス」なのですか？​

ヘッドレスとは、DropupがUIコンポーネントを含まないことを意味します。ロジックと状態管理を提供する一方で、UIは自由に構築できます。これにより、外観と操作感を完全に制御できます。

バンドルサイズはどのくらいですか？​

  • コア（@samithahansaka/dropup）：< 10KB gzip圧縮後
  • クラウドサポート付き：プロバイダーごとに+2KB
  • 画像処理付き：+5KB
  • tusプロトコル付き：+3KB（tus-js-clientのピア依存関係が必要）

TypeScriptをサポートしていますか？​

はい！DropupはTypeScriptで書かれており、包括的な型定義が含まれています。@typesパッケージは不要です。

必要なReactのバージョンは？​

React 16.8以上（フックサポートが必要です）。

使い方​

ファイルをアップロードするにはどうすればいいですか？​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// すべてのファイルをアップロード
actions.upload();

// 特定のファイルをアップロード
actions.upload(['file-id-1', 'file-id-2']);

検証エラーを処理するにはどうすればいいですか？​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

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

カスタムアップロードロジックを使用できますか？​

はい！設定オブジェクトの代わりに関数を渡します:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // カスタムアップロードロジック
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

プログラムでファイルを追加するにはどうすればいいですか？​

const { actions } = useDropup();

// クリップボードから
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

複数のドロップゾーンを持つことはできますか？​

はい！各useDropup呼び出しは独立したインスタンスを作成します:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// 別々に使用
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

アップロード​

アップロードの進捗を表示するにはどうすればいいですか？​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

アップロードをキャンセルするにはどうすればいいですか？​

const { actions } = useDropup();

// 特定のファイルをキャンセル
actions.cancel('file-id');

// すべてのアップロードをキャンセル
actions.cancel();

失敗したアップロードを再試行するにはどうすればいいですか？​

const { actions } = useDropup();

// 特定のファイルを再試行
actions.retry(['file-id']);

// すべての失敗したファイルを再試行
actions.retry();

チャンク化されたアップロードをサポートしていますか？​

はい！createChunkedUploaderを使用します:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

S3に直接アップロードできますか？​

はい！クラウドアップローダーを使用します:

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 }),
      });
      return res.json();
    },
  }),
});

検証​

ファイルタイプを制限するにはどうすればいいですか？​

// MIMEタイプで
useDropup({ accept: 'image/*' });

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

// 複数
useDropup({ accept: ['image/*', 'application/pdf'] });

サイズ制限を設定するにはどうすればいいですか？​

useDropup({
  maxSize: 10 * 1024 * 1024, // 最大10MB
  minSize: 1024,             // 最小1KB
});

ファイル数を制限するにはどうすればいいですか？​

useDropup({
  maxFiles: 5,
});

カスタム検証を追加できますか？​

はい！customRulesを使用します:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'ドラフトファイルは許可されていません';
      }
      return true;
    },
  ],
});

プレビュー​

画像プレビューを表示するにはどうすればいいですか？​

プレビューはデフォルトで有効になっています:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

プレビューURLをクリーンアップする必要がありますか？​

いいえ！Dropupは、ファイルが削除されたときやコンポーネントがアンマウントされたときに、自動的にObject URLを破棄します。

プレビューを無効にできますか？​

useDropup({ generatePreviews: false });

トラブルシューティング​

ファイルがアップロードされない​

  1. uploadが設定されているか確認してください:

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

  2. actions.upload()を呼び出しているか確認してください（autoUpload: trueでない限り）

  3. ブラウザのコンソールでネットワークエラーを確認してください

プレビューURLが機能しない​

  1. ファイルが画像であることを確認してください
  2. generatePreviewsがfalseでないことを確認してください
  3. ファイルオブジェクトに有効なpreviewプロパティがあることを確認してください

ドラッグ&ドロップが機能しない​

  1. コンテナ要素にgetDropProps()をスプレッドしているか確認してください
  2. 非表示の入力を含めてください: <input {...getInputProps()} />
  3. disabledがtrueでないことを確認してください

TypeScriptエラー​

  1. 最新のDropupバージョンに更新してください
  2. tsconfig.jsonに適切なmoduleResolutionがあることを確認してください
  3. @samithahansaka/dropupがdevDependenciesではなくdependenciesにあることを確認してください

メモリリーク​

  1. useDropupを使用しているコンポーネントが適切にアンマウントされることを確認してください
  2. 必要に応じて、アンマウント前にactions.reset()を呼び出してください
  3. クリーンアップなしで外部の状態にファイルを保存しないでください

互換性​

Next.jsで動作しますか？​

はい！'use client'ディレクティブを使用してください:

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

React Nativeで動作しますか？​

はい！ネイティブアダプターを使用してください:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

SSRをサポートしていますか？​

はい！DropupはSSR安全です。ブラウザAPIは利用可能な場合にのみ使用されます。

ブラウザサポートは？​

すべてのモダンブラウザ:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

貢献​

どのように貢献できますか？​

  1. リポジトリをフォークする
  2. 機能ブランチを作成する
  3. プルリクエストを送信する

詳細はCONTRIBUTING.mdを参照してください。

バグを報告するにはどうすればいいですか？​

github.com/samithahansaka/dropup/issuesでissueを開いてください。

ロードマップはありますか？​

計画されている機能については、GitHubのissuesとdiscussionsを確認してください。