File uploadforms

Keyboard-operable dropzone and file list with type and size checks, image previews, per-file progress, retry and a pluggable upload adapter.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/file-upload

의존 아이템button locale progress style

Default

file-upload-demo.tsx

"use client";
import { FileUpload, type UploadContext } from "@/components/ui/file-upload";
function fakeUpload(file: File, { signal, onProgress }: UploadContext): Promise<{ name: string }> {  return new Promise((resolve, reject) => {    let loaded = 0;    const timer = setInterval(() => {      loaded = Math.min(file.size, loaded + Math.max(1, file.size / 5));      onProgress({ loaded, total: file.size });      if (loaded >= file.size) {        clearInterval(timer);        resolve({ name: file.name });      }    }, 100);    signal.addEventListener("abort", () => {      clearInterval(timer);      reject(signal.reason);    });  });}
export default function FileUploadDemo() {  return (    <div className="w-96">      <FileUpload aria-label="Upload documents" upload={fakeUpload} accept={["image/*", "application/pdf"]} maxFiles={3} maxBytes={5 * 1024 * 1024} />    </div>  );}