Components › Records & data › Attachment › File drop

File drop

canon

The one surface for choosing a file: drop zone with a glyph, label, accepted formats, upload progress and an inline error.

Owner approved v2 on 3 Oct 2026 (acrm !4548): replaced Import .drop, the identity image .idimg-pick and the Documents step-1 zone. Import on dev = approved design, 0 px difference (1440 and 390). Canon since 4 Oct 2026: also used by step 1 of the Documents form-less dialog (acrm !4574), checked on dev at 1440 and 390.

Used in 3 files · 3 areas · 3× — components/IdentityImageDialog, components/evidence, pages/ImportPage

@acrm/ui <FileDrop>.acrm-filedrop-wrap .acrm-filedrop .fd-ic .fd-label +3SourceStory
ExamplesCodeUsageAccessibilityChangelog

The one surface for choosing a file. FileDrop from @acrm/ui, styles .acrm-filedrop in apps/web/src/ds/file-drop.css. Replaced Import .drop, the identity-image .idimg-pick and the Documents step-1 zone (owner approval 3 Oct 2026, acrm !4548).

When to use

  • The user brings one file from their device: an import table, a scan, a logo or a photo.
  • The file starts a flow (upload, parse, AI read) right after it is chosen.

When not to use

  • Attachments of a message or a note — use Attachment.
  • Several files at once — FileDrop takes the first file only.
  • Picking an existing record or a file already in the CRM — use RecordSelect.

Touch target on phone

The whole surface is the target; a tap opens the file dialog. There is no drag-over state on touch.

Anatomy

  1. Icon in a 46 px ring (--accent glyph, 22 px) — or media: the record's mark (logo / photo preview).
  2. Label — the host's sentence, 600 13.5 px.
  3. Formats line — quiet, 400 12 px --fg-muted; types and the size limit.
  4. Error line under the surface — --critical-ink, the border turns --critical.

Uploading replaces 2 and 3 with the canonical Progress; the surface is inert.

Best practices

Do
  • Let the screen supply the text in its own voice (Import and Documents use ty, keep it).
  • State the real limit in the formats line only when it is enforced (maxSize); without a limit, no number.
  • Pass wrongTypeText / tooLargeText so a rejected file explains itself inline.
  • Use inputRef when a footer button is a second path to the same file dialog.
Don’t
  • No explanatory sentence in or under the surface ("until then the avatar applies…").
  • No spinner over the whole surface — use uploading.
  • No toast for a rejected file — the error stays inline.

Content

One sentence with the action ("Přetáhni libovolný CSV sem nebo vyber soubor") + formats ("PDF, JPG nebo PNG"). Errors say what to do next.

Progress · Attachment · Identity image dialog · Import

Source: docs/attachment/file-drop.usage.md · GitLab