Preview

Single file upload

Multiple files upload

Features

  • Single file upload

    Use to allow the selection of a single file for upload from the user's local drive. Selecting another file overwrites the existing selection.

  • Multiple files upload

    Use to allow the selection of multiple files for upload from the user's local drive. It uses tokens to display multiple files. Files can be removed individually.

  • Label

    Use the label to describe the file type or its purpose. Follow the guidelines for form field.

    For example: User data.

  • Description - optional

    Use the description to state what the action will do in the context for the form. Follow the guidelines for form field.

    For example: The files selected will be uploaded to this S3 bucket.

  • Hint text - optional

    Include all constraints that the file must match in the hint text, such as size or file type. Make sure to specify and implement validation for which file types are acceptable. Activate or deactivate non-compliant files in the folder window.

    Follow the guidelines for form field.

  • Button

    The button opens the native folder window for local file selection. Use a secondary normal button. Follow the guidelines for normal buttons.

  • File metadata

    File metadata helps the user to validate and compare the files selected. Choose the most relevant file metadata to display, based on your use case. The types of metadata that can be displayed per file are:

    • Name - each file name. This should not include path information.

    • Type or extension.

    • Size - expressed in bytes. Kilobyte (KB), megabyte (MB), gigabyte (GB), and so forth.

    • Last modified date.

    • Image thumbnail - in multiple files upload case only.

    If a file name cannot be displayed completely, it will be truncated using an ellipsis (...).

  • Status

    Use a status-positive icon on each file to indicate that it has been successfully selected.

  • Token

    Use tokens when uploading multiple files to display metadata and allow for individual removal. Tokens should stack vertically, aligned with each other, to allow for easy scanning.

  • Validation

    After selection, the upload of the files is completed only when the user submits the form. For errors, follow the guidelines for form field. Upon submission, follow the guidelines for validation.

General guidelines

Do

  • Use hint text to indicate the file constraints upfront.
  • Use last modified date and image thumbnail file metadata sparingly. Use those types of metadata if they are key to compare and distinguish between files.
  • Keep the type and format of metadata consistent between each token for easy comparison.
  • Use single file upload or multiple files upload appropriate to your use case.

Don't

  • Don't use a token for a standalone element in single file upload.

Writing guidelines

General writing guidelines

  • Keep labels and descriptions clear and concise.

  • Use parallel sentence structure.

  • Use sentence case for all text. Don’t use title case.

  • Use terminal punctuation (periods, exclamation points, question marks).

  • Use present-tense verbs and active voice wherever possible.

  • Don't use "please," "thank you," or Latinisms such as "e.g.," "i.e.," or "etc."

Component-specific guidelines

Labels

Follow the writing guidelines for form field.

Descriptions

Follow the writing guidelines for form field.

Hint text

  • A line of text explaining the requirements of the files.

    • For example: The file must be .jpg or .png. 500kb max file size.

  • Follow the writing guidelines for form field.

Button

Use action verbs that reflect the goal of the selection. Use this format: Choose file[s]

Accessibility guidelines

General accessibility guidelines

  • Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.

  • Make sure to define ARIA labels aligned with the language context of your application.

  • Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.

  • Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.

  • Make sure you define ARIA labels for the selection inputs that are aligned with the language context of your application.

Alternative text

Specify alternative text for the remove icon in the tokens.

For example: Remove file.