Skip to main content
v0.1 dev

Component 14 · Forms

File upload

Upload evidence, calibration files, or farm documents.

implementedPhase 2review

Overview

Upload evidence, calibration files, or farm documents. It transforms operator input into a labeled domain value while preserving recoverable input through validation, delay and offline queuing.

When to use

Use HE/File upload when you need to upload evidence, calibration files, or farm documents. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

Atlantic · interactive specimen
<label class="he-file-upload"><input type="file"><span class="he-file-upload__title">Upload calibration file</span><span class="he-file-upload__meta">JSON up to 5 MB</span></label>

Anatomy

1Persistent label
2Control
3Help or error
4Sync state

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Variants

buttondropZonecompact

States

idledragOveruploadingcompleteerrordisabled

Accessibility

Provide a normal file input path, accepted formats, size limits, and progress text.

  • Maintain a visible keyboard focus indicator and a logical focus sequence.
  • Never rely on colour alone for operational, freshness or severity state.
  • Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

SurfaceCanonical nameStatus
FigmaHE/File uploadreview
Web.he-file-uploadimplemented
FlutterHeFileUploadimplemented
Token rootcomponent.fileuploadgenerated