File Upload

🧭 When to Use File Upload

Use File Upload when:

• Users need to attach, import, or submit files

• Your flow includes resumes, images, PDFs, or document uploads

• You want to give clear feedback during the file selection and upload process

Avoid using it when:

• A file isn’t required — use a link input or embedded file instead

• Only one specific format is accepted — a formatted input with validation might work better

🎯 Statuses

File Upload supports multiple statuses to give users clear feedback throughout the process:

• Default – No file selected, waiting for user interaction

• Hover – Drag-over or pointer interaction hint; highlights drop zone

• Uploading – File is currently being uploaded; can include a progress bar or spinner

• Error – Something went wrong; shows a message or icon with an option to retry

All statuses follow your system’s semantic color tokens and iconography standards.

🎨 Types

The component includes three layout variants to support different use cases:

• Wide – Full-width horizontal area with text, icon, and drop zone. Ideal for forms or standalone upload areas

• Simple – Compact inline version with just a label and button. Great for quick document uploads

• Square – Fixed ratio drag-and-drop area with a centered icon and message. Perfect for media (e.g., avatars, thumbnails, or drag zones in a grid)

Each type is a standalone component in Figma and can be toggled via variants.

🧩 Component Features

Depending on the variant and status, each File Upload may include:

• A drag-and-drop surface

• A clickable trigger button (e.g., “Browse files”)

• A loading spinner or progress bar

• An error icon and retry message

• A preview thumbnail or file name (optional)

Each layer can be toggled in Figma using component properties.

♿ Accessibility Considerations

From a design perspective:

• Ensure all states (especially hover and error) are clear and legible

• Include descriptive labels like “Drag and drop your file here” or “Upload .PDF only”

• Maintain minimum target size and padding for click/tap interactions

From a code perspective (if implemented):

• Use <input type="file"> and label it clearly with for

• Set aria-invalid="true" and provide aria-describedby when errors occur

• Announce upload progress using aria-live and visually hidden status labels

✅ Best Practices

• Use wide or square types for drag-and-drop areas; simple for quick uploads

• Show allowed file types or limits (e.g., “Max 10MB, PDF only”)

• Provide inline feedback during upload (spinner, progress bar, confirmation)

• Let users replace or remove uploaded files

• Handle errors gracefully with retry options and helpful messages