preview image
プレビューを開始
2024/04/10

画像アップローダー(ドラッグ&ドロップ対応)

よくあるドラッグ&ドロップで画像をアップロードできるやつです

SHARE

About Preview

このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

Default Packages

プレビュー画面では以下のパッケージがインストールされています

  • TailwindCSS
  • clsx
  • lucide-react (アイコン)
pnpm add tailwindcss clsx lucide-react

Component PropsType

interface ImageUploaderProps {
  className?: string;
  onDrop?: ({
    filename,
    filetype,
    blob,
  }: {
    filename: string;
    filetype: string;
    blob: string | ArrayBuffer;
  }) => void;
}