File Uploader
ファイルのドラッグ&ドロップ受け入れエリア。領域にファイルをドラッグするとボーダーと背景が青系に切り替わり、ドロップ可能なことを示す。枠内クリックでも OS のファイルピッカーが開く。
状態
Default(通常)と Draging(ドラッグ中)の 2 状態。
Default
Draging
プレビュー
領域にファイルをドラッグオーバーすると Draging 状態に切り替わります。ドロップまたは枠内クリックで選択ダイアログが開きます。
実装例
"use client";
import { FileUploader } from "@/components/FileUploader";
export function UploadArea() {
return (
<FileUploader
multiple
accept="image/*,application/pdf"
onFiles={(files) => {
Array.from(files).forEach((file) => {
console.log(file.name, file.size, file.type);
});
}}
/>
);
}