Upload field

Angular

See content

Blazor

See content

Upload field allows the user to select and upload a file on the system.

Usage

When to use

Use it when the user needs to send some documents through a form.

Anatomy

  1. Label: Indicate what file is expected. It must be short.

  2. File: The name of the file the user uploads.

  3. Submit button: On click, the user can select the file to upload. It can be text or icon.

  4. Drag zone: You can also have a drag and drop zone to upload file.

  5. Instruction: Indication for the user: maximum size, format of the file…

Placement

In a form, the upload field must be aligned vertically with the other elements of the form.

Keyboard Navigation: The user must be able to navigate between the fields with the “tabs” key.

Do’s & Don’ts

Do

When using upload field component, always think about adding useful information for the user who is ready to upload file like : format files requested, maximum weight tolerance if there are restrictions.

Don’t

Do not hide indications about format or/and weight restrictions.

Do

When the upload is starting or pending, always show all the characteristics like the information of the file (the weight) and the upload progression. Be sure to add an option for cancelling the upload.

Don’t

When the upload is starting or pending, do not hide the status and the progress. Also be sure to show the characteristics of the file uploaded and a way to cancel it.

Do

Do use the 2 upload modes : Browsing and dragging and drop files. It will help users to choose which mode they favour.

Don’t

Do not favour or force one upload mode. Some users may be not comfortable with this mode.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.