sxsphinxstack

Skills / Working / Design a file upload interface

Working Design skill

Design a file upload interface

Design a file upload interface with clear acceptance, progress, inspection, correction, and recovery states.

Set expectations before selection and preserve a clear record for every file afterward.

Procedure

  1. Define allowed purpose, types, sizes, counts, privacy, retention, and processing time.
  2. Support accessible browse, drag and drop, camera, or paste only where useful.
  3. Show selected name, type, size, preview, ordering, removal, and replacement.
  4. Validate early while keeping server inspection authoritative.
  5. Display per-file queued, uploading, paused, processing, complete, warning, and failed states.
  6. Support cancellation, bounded retry, duplicate handling, and resumability where justified.
  7. Explain rejection and scanning without exposing detection details.
  8. Test keyboard, screen reader, mobile capture, slow network, interruption, and mixed outcomes.
  9. Reconcile UI completion with durable server and processing state.

Guardrails

  • Never imply a file is accepted before server validation and required inspection complete.
  • Do not expose local paths or other users' filenames.
  • Preserve a non-drag alternative.

Related skills

  • Design a file management interface — Design a file-management interface with clear ownership, location, permissions, versions, transfer states, search, and recoverable destructive action…
  • Design a filtering interface — Design filters that expose available dimensions, current constraints, result effects, and reversible changes.
  • Design a date and time input — Design date and time input with explicit locale, time zone, precision, validation, ambiguity handling, and accessible alternatives.