Client-side validation error messages
Client-side validation errors give instant feedback.
Validation error messages should be:
- Explicit: help merchants understand why their file can’t be uploaded and what they should change to successfully upload their file
- In sentence case: capitalize only the first word in the message
- Concise: use simple, clear language that can be read at a glance. For example:
File size must be less than 20MB
File type must be .gif, .jpg, .png or .svg
Server-side upload error messages
Server-side upload errors give feedback after file submission.
Upload error messages should:
- Be displayed as a banner with a critical status
- Show the name of the file(s) that were not uploaded successfully
- Describe why the file(s) couldn’t be uploaded and what merchants should change to upload their file successfully, as seen below
The following images couldn’t be uploaded:
* “keep-it-real.png” is too large. Try a file size less than 20MB.
* “realer-than-real.zip” is not supported. File type must be .gif, .jpg, .png or .svg.
* “so-so-real.png” was interrupted due to weak network connection, [retry upload](