20:I[49540,["/_next/static/chunks/3xwi3eyvugjji.js","/_next/static/chunks/1p5iw4os38a2a.js","/_next/static/chunks/377585bqo7_pw.js","/_next/static/chunks/2sxg_f49bqkv5.js","/_next/static/chunks/0qb582gi4rpjj.js","/_next/static/chunks/136h_y9006otr.js","/_next/static/chunks/32yvduon-v0ih.js","/_next/static/chunks/3gq77idmante9.js","/_next/static/chunks/1iv8i0peag601.js","/_next/static/chunks/2cedjd44j3q94.js","/_next/static/chunks/2pqqkz822faep.js"],"ComponentPage"] 21:T421,import { useRef, useState } from 'react'; import { FileUpload, type UploadFile } from '@dev-dga/react'; export default function Demo() { const [files, setFiles] = useState([]); const idRef = useRef(0); function handleAdded(accepted: File[]) { const added = accepted.map((file) => ({ id: `f${idRef.current++}`, file, status: 'uploading', })); setFiles((prev) => [...prev, ...added]); // Simulate each upload finishing after a moment. added.forEach((item) => setTimeout(() => { setFiles((prev) => prev.map((f) => (f.id === item.id ? { ...f, status: 'success' } : f))); }, 1200), ); } return (

setFiles((prev) => prev.filter((f) => f.id !== id))} accept="image/*,.pdf" maxSize={2 * 1024 * 1024} description="Maximum file size 2MB. Accepted formats: .jpg, .png, and .pdf." />

); }22:T4f7,import { useRef, useState } from 'react'; import { FileUpload, type UploadFile, type FileRejection } from '@dev-dga/react'; export default function Demo() { const [files, setFiles] = useState([]); const [notice, setNotice] = useState(null); const idRef = useRef(0); return (

{ setNotice(null); setFiles((prev) => [ ...prev, ...accepted.map((file) => ({ id: `f${idRef.current++}`, file, status: 'success', })), ]); }} onFilesRejected={(rejections: FileRejection[]) => setNotice(`${rejections[0].file.name}: ${rejections[0].errors.join(', ')}`) } onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))} /> {notice && (

{notice}

)}

); }

Drag-and-drop zone

Single file (button variant)

Validation & rejections