DEVELOPMENT PREVIEWIn development
GitHub

Dropzone

Drag-and-drop file picking with inline validation — wrong type, too big or too many report right under the zone, never as toasts.

Multiple files with limits

Drag and drop files here or browseAccepts image/*,.pdf · up to 5.0 MB

0 files selected

Snippet
import { Dropzone } from '@creo-team/buzz-ui/client'

<Dropzone
  accept="image/*,.pdf"
  multiple
  maxSize={5 * 1024 * 1024}   // 5 MB per file
  maxFiles={4}
  onFilesChange={setFiles}
  onFilesRejected={rejections => log(rejections)}
/>

Avatar upload

Click the camera or drop an image onto the avatar.

Snippet
import { AvatarUpload } from '@creo-team/buzz-ui/client'

<AvatarUpload
  name={user.name}                  // initials fallback
  src={user.avatarUrl}              // current image
  maxSize={2 * 1024 * 1024}
  onImageChange={(file, previewUrl) => uploadAvatar(file)}
  onRemove={() => clearAvatar()}
/>

Build your own

Both components ride the exported useFileDrop hook — hidden-input plumbing, drag state and validation for any custom surface — plus isFileAccepted and formatFileSize utilities.

Snippet
import { useFileDrop } from '@creo-team/buzz-ui/client'

const { isDragOver, openPicker, rootProps, inputProps } = useFileDrop({
  accept: 'text/csv',
  onAccepted: ([file]) => importCsv(file),
  onRejected: rejections => setError(rejections[0].message),
})

return (
  <button {...rootProps} onClick={openPicker} data-drag-over={isDragOver || undefined}>
    Import CSV
    <input {...inputProps} hidden />
  </button>
)

Dropzone API

PropTypeDefaultDescription
accept
string—File-input accept grammar: '.pdf', 'image/*', 'image/png'.
multiple
booleanfalseAccumulate files instead of replacing.
maxSize
number—Per-file cap in bytes; larger files are rejected inline.
maxFiles
number—Cap on total kept files.
files / defaultFiles
File[]—Controlled / uncontrolled file list.
onFilesChange
(files: File[]) => void—Full updated list on every add or remove.
onFilesRejected
(rejections: FileRejection[]) => void—Files that failed validation, with reasons.
label / description
ReactNode—Zone text; description defaults to a hint built from accept/maxSize.
showList
booleantrueRender the kept files under the zone.

AvatarUpload API

PropTypeDefaultDescription
src
string—Current image URL.
name
string—Initials fallback while no image is set.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl''xl'Avatar size preset.
maxSize
number—Image size cap in bytes.
onImageChange
(file: File, previewUrl: string) => void—Valid image picked or dropped; previewUrl is a data URL.
onRemove
() => void—Shows a remove badge while an image is set.