←→ switch·Esc back

File

You might say

For uploaded attachments, show the filename and size and let people remove them.

A UI row or card that shows one document, image, or attachment and its statusAn upload list might show project-plan.pdf, 2.4 MB, and Uploaded. Make the filename most prominent and use type and status as support; an icon alone does not identify the file.
🖼homepage-design.png4.8 MB · Uploaded✓
📄project-plan.pdf2.4 MB · Uploading66%
File≠Upload

file displays a file that exists or is being processed. Upload covers the full flow of choosing, transferring, and processing a file.

When to use it

  • Uploaded attachments
  • Project-file browsing
  • Chat attachments

When NOT to use it

  • No file selected: use Upload
  • An icon with no readable filename
  • A hidden status or delete action
Anatomy
📄project-plan.pdf2.4 MB · PDF↓
Use an icon and text together to identify the type
Prioritize the name; size and status support it
Keep download, preview, or more actions reachable
Variants
Compact
📄plan.pdf
In chat or a narrow list
Status
📄plan.pdfUploading 66%
While transfer is in progress
Card
🖼cover.png4.8 MB
When an image or file needs a preview
Typical use cases
Completed upload
📄requirements.pdfYesterday, 2:20 PM · 1.8 MB↓
Project files
🖼homepage-design.pngVersion 3 · 4.8 MB⋯
Chat attachment
📎meeting-notes.docxAlex · 12:30 PM↓