File Upload fields don’t have a fixed design in the design system yet. The design below is an illustration of how they could look. However, general best practices for this element have already been outlined below.
File Uploads
Description
File upload fields let users select and submit files from their device. They include an "Upload" button and optional text for guidance. Once a file is chosen, the field shows clear visual feedback, such as the file name.
Use Case
File uploads allow users to submit documents, images, or other media necessary for verification, applications, issue reporting, or content sharing. They provide a way to attach supporting information that cannot be entered as text.
Usage
Clarity: Clearly indicate what file is required in the label. Specify accepted file types, size limits and other restrictions (like filenames) upfront. Show this information in the info point tooltip. If further information is required it can be shown above the upload field. Show error messages for incorrect file types or sizes.
Allow Drag & Drop Uploads: Users should be able to drag a file into the upload area. Provide a visible drop zone with a dashed border and icon.
Progress Indicator: Provide an indicator that shows the progress of each file upload.
Canceling Uploads: Allow users to cancel mid-upload if needed.
Show File Previews (For Images & PDFs): In some cases - such as PDFs and images - it can be helpful to provide users with the option to preview their uploaded files. To enable this, users should be able to open the uploaded file using their system's default applications.
File Size Limits: Use HTML max attributes and backend validation.
File Type Restrictions: Use the accept attribute for images, documents, etc.
Use Asynchronous Uploading: AJAX allows file uploads without refreshing the webpage. This makes the process smoother and faster.
Example
File Upload fields don’t have a fixed design in the design system yet. The design below is an illustration of how they could look..
