File uploader

A file uploader is used to upload files from a computer or device to the application.

Examples

TODO:
Add examples. Create an issue

View in Pajamas UI Kit →

Structure

Numbered diagram of a file uploader structure
File uploader structure
  1. Title: Gives context to the file uploader.
  2. Choose file: Button that triggers the file upload process.
  3. File name: Name of the file once uploaded to the frontend.
  4. Help text: Help text describing the upload process or requirements.
  5. Submit: Once uploaded to the frontend, submits the file to the system.
  6. Removal: Icon button that removes the file uploaded to the frontend.
  7. Container (Multi-file uploader): Drop area for uploading multiple files.
  8. Icon (Multi-file uploader): Icon indicating the element is for uploading files.
  9. Spinner (Multi-file uploader): Spinner is visible when files are uploading.
  10. Loading text (Multi-file uploader): Text displaying number of files currently uploading.
  11. Cancel (Multi-file uploader): Cancel button to stop the upload.

Guidelines

When to use

  • Users need to upload one or more files to the system.

Variants

TODO:
Add file uploader variants. Create an issue

Behavior

  • Selecting a file uploads the file to the frontend.
  • The upload loading state is indicated by the use of a spinner, showing the percent complete.
  • Filename and submit button appear once a file is uploaded to the frontend.

Accessibility

TODO:
Add accessibility specs. Create an issue

Last updated at: