ファイルアップロードUIライブラリ比較

'use client';
import { useDropzone, ErrorCode } from 'react-dropzone';
import type { FileError, FileRejection } from 'react-dropzone';
import { useState, useCallback } from 'react';

type Rejected = { id: string; name: string; size: number; errors: string[] };

// 既定のエラー文言は英語（例: 'File is larger than 10 MB'）。
// getErrorMessage はエラー1件ごとに呼ばれ、返した文字列が message を置き換える。
// 変更しないコードは error.message をそのまま返すのが公式の作法
const getErrorMessage = (error: FileError, file: File) => {
  switch (error.code) {
    case ErrorCode.FileInvalidType:
      return '対応していない形式です（PNG・JPG・GIF・WebP・PDF・TXT・CSV のみ）';
    case ErrorCode.FileTooLarge:
      return `サイズが上限の10MBを超えています（${(file.size / 1024 / 1024).toFixed(1)} MB）`;
    default:
      return error.message;
  }
};

export function ReactDropzoneDemo() {
  const [files, setFiles] = useState<File[]>([]);
  const [rejected, setRejected] = useState<Rejected[]>([]);

  // onDrop の第2引数で拒否ファイルを受け取り、自前の state に累積する。
  // useDropzone の戻り値にも fileRejections があるが、そちらは直近ドロップ分のみで毎回置き換わる
  const onDrop = useCallback((accepted: File[], rejections: FileRejection[]) => {
    setFiles(prev => [...prev, ...accepted]);
    setRejected(prev => [
      ...prev,
      ...rejections.map(r => ({
        id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
        name: r.file.name,
        size: r.file.size,
        // 1ファイルに複数のエラーが付くことがある（種別 + サイズなど）
        errors: r.errors.map(e => e.message),
      })),
    ]);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
      'application/pdf': ['.pdf'],
      'text/*': ['.txt', '.csv'],
    },
    maxSize: 10 * 1024 * 1024,
    // v19.2.0 以降、ペーストでのアップロードが既定で有効。デモでは無効化する
    noPaste: true,
    getErrorMessage,
  });

  return (
    <div>
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
          isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
        }`}
      >
        <input {...getInputProps()} />
        <p className="text-gray-500 text-sm">
          {isDragActive ? 'ここにドロップ' : 'クリックまたはドラッグ＆ドロップでファイルを選択'}
        </p>
        <p className="text-gray-400 text-xs mt-1">
          画像（PNG・JPG・GIF・WebP）／PDF／テキスト（TXT・CSV）　最大10MB
        </p>
      </div>

      {/* 拒否ファイル。ドロップゾーンと受理リストの間に置き、直前の操作結果を先に見せる */}
      {rejected.length > 0 && (
        <div className="mt-4 space-y-2">
          <div className="flex items-center justify-between">
            <p className="text-sm font-medium text-red-700">
              受け付けられなかったファイル（{rejected.length}件）
            </p>
            <button onClick={() => setRejected([])} className="text-xs text-red-500 hover:text-red-700">
              すべて削除
            </button>
          </div>
          {rejected.map(r => (
            <div key={r.id} className="border border-red-200 bg-red-50 rounded-lg p-3 flex items-start gap-3">
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-red-700 truncate">{r.name}</p>
                <p className="text-xs text-red-700">{(r.size / 1024).toFixed(1)} KB</p>
                <ul className="mt-1 space-y-0.5">
                  {r.errors.map((message, i) => (
                    <li key={i} className="text-xs text-red-700">{message}</li>
                  ))}
                </ul>
              </div>
              <button
                onClick={() => setRejected(prev => prev.filter(x => x.id !== r.id))}
                className="text-red-400 hover:text-red-600 text-sm"
              >
                ×
              </button>
            </div>
          ))}
        </div>
      )}

      {files.length > 0 && (
        <ul className="mt-4 space-y-2">
          {files.map((f, i) => (
            <li key={i} className="flex items-center gap-2 text-sm text-gray-700">
              <span>📎</span>
              <span>{f.name}</span>
              <span className="text-gray-400">({(f.size / 1024).toFixed(1)} KB)</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

'use client';
import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import { useState } from 'react';

registerPlugin(FilePondPluginImagePreview);

export function FilePondDemo() {
  const [files, setFiles] = useState<File[]>([]);

  return (
    <FilePond
      files={files}
      onupdatefiles={items => setFiles(items.map(i => i.file as File))}
      allowMultiple={true}
      labelIdle='ファイルをドラッグ＆ドロップ、または <span class="filepond--label-action">ブラウズ</span>'
    />
  );
}

'use client';
import { useState, useCallback } from 'react';

export function CustomUploadDemo() {
  const [files, setFiles] = useState<{ name: string; size: number }[]>([]);
  const [isDragging, setIsDragging] = useState(false);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const dropped = Array.from(e.dataTransfer.files);
    setFiles(prev => [...prev, ...dropped.map(f => ({ name: f.name, size: f.size }))]);
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selected = Array.from(e.target.files ?? []);
    setFiles(prev => [...prev, ...selected.map(f => ({ name: f.name, size: f.size }))]);
  };

  return (
    <div>
      <label
        onDragOver={e => { e.preventDefault(); setIsDragging(true); }}
        onDragLeave={() => setIsDragging(false)}
        onDrop={handleDrop}
        className={`block border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
          isDragging ? 'border-emerald-500 bg-emerald-50' : 'border-gray-300 hover:border-gray-400'
        }`}
      >
        <input type="file" multiple className="hidden" onChange={handleChange} />
        <p className="text-gray-500 text-sm">クリックまたはドラッグ＆ドロップ</p>
      </label>
      {files.length > 0 && (
        <ul className="mt-4 space-y-2">
          {files.map((f, i) => (
            <li key={i} className="flex items-center justify-between text-sm p-2 bg-gray-50 rounded">
              <span>{f.name}</span>
              <span className="text-gray-400">{(f.size / 1024).toFixed(1)} KB</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}