File drop

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