Import Dropzone Card

A dashed dropzone with an upload chip and hint, over a single file row with a live progress bar.

Import member records

Drop a CSV or browse — we map the fields

members_export_2026.csv72%

Import & use

import { Upload32 } from "@/components/beste/piece/upload32";

<Upload32
  title="Import member records"
  hint="Drop a CSV or browse — we map the fields"
  file={{
    "name": "members_export_2026.csv",
    "percent": 72
  }}
/>

More Upload pieces

View all Upload

Drag files to uploador click to browse your device

Drop Zone

Dashed upload surface centered on a cloud icon, with headline, subtitle, and a select button.

Upload artwork

PNGJPGSVGWebP

Up to 10 MB

Formats Drop Zone

Upload prompt that lists accepted formats as mono pills beside a size-limit caption.

brand-guidelines.pdf12.4 MB · 68%

File Upload Card

File tile with icon, name, size, and an inline progress bar.

Uploading 24 files9.2 MB/s overall

74%

18Done

3Uploading

3Queued

Batch Summary

Aggregate upload card with a total-files header, a single sky bar, and a done, uploading, queued tally.

brand-hero.jpg2400 × 1600 · 1.4 MB

Image Preview

Uploaded-image card with a dashed crop overlay on a gradient placeholder and rotate, crop, delete tools below.

team-retreat.mov612 MB

File exceeds 500 MB upload limit

Upload Error

Failed-upload card with a rose-tinted file row, an alert message in its own box, and a Retry button.