File upload
WCAG 2.2
New WCAG 2.2 criteria affects this component
To use the ‘File upload’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:
See the full list of components and patterns affected by WCAG 2.2.
When to use this component
You should only ask users to upload something if it’s critical to the delivery of your service.
How it works
You can use the above HTML.
To upload a file, the user can either:
- use the ‘Choose file’ button
- ‘drag and drop’ a file into the file upload input area
WCAG 2.2
New WCAG 2.2 criteria affects dragging movements
Do not use ‘drag and drop’ as the only way to upload files. You must provide another method, such as the ‘Choose file’ button. This is to comply with WCAG 2.2 success criterion 2.5.7 Dragging Movements.
New WCAG 2.2 criteria affects redundant entries
Make sure users can easily reuse a previously uploaded file within a single journey, unless doing so would be a major security or privacy concern.
For example, a user might need to upload a photo of their driving licence to prove their identity, and again to prove their address.
You can make it easier for the user to reuse a file by showing it as an option for the user to select instead of the file upload. Consider users on public devices before choosing to make the file available to preview or download. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry.
Error message
Error messages should be styled like this:
Make sure errors follow the guidance in error message and have specific error messages for specific error states.
If no file has been selected
Say ‘Επιλέξτε [ό,τι πρέπει να επιλέξουν]’. For example, ‘Επιλέξτε μια εξουσιοδότηση’.
If the file is the wrong file type
Say 'Το επιλεγμένο αρχείο πρέπει να είναι [λίστα από τύπους αρχείων]’. For example, 'Το επιλεγμένο αρχείο πρέπει να είναι CSV ή ODS' or 'Το επιλεγμένο αρχείο πρέπει να είναι JPG, BMP, PNG, TIF ή PDF'.
If the file is too big
Say ‘Το επιλεγμένο αρχείο πρέ πει να είναι μικρότερο από [το μέγιστο μέγεθος αρχείου]’. For example, ‘Το επιλεγμένο αρχείο πρέπει να είναι μικρότερο από 2MB’.
If the file is empty
Say ‘Το επιλεγμένο αρχείο είναι άδειο’.
If the file contains a virus
Say ‘Το επιλεγμένο αρχείο περιέχει ιό’.
If the file is password protected
Say ‘Το επιλεγμένο αρχείο προστατεύεται από κωδικό’.
If there was a problem and the file was not uploaded
Say ‘Το επιλεγμένο αρχείο δεν μπόρεσε να ανέβει, προσπαθήστε ξανά’.
If there is a limit on how many files the user can select
Say ‘Μπορείτε να επιλέξετε μέχρι [μέγιστος αριθμός] αρχεία ταυτόχρονα’. For example, ‘Μπορείτε να επιλέξετε μέχρι 10 αρχεία ταυτόχρονα’.
If the file is not in a template that must be used or the template has been changed
Say ‘Το επιλεγμένο αρχείο πρέπει να χρησιμοποιεί το συγκεκριμένο πρότυπο’.
Figma Reference
Find more information regarding File Upload in Figma Community File
