I have two types of validation pop-ups (toasts). One is used to display error messages in red and another one is for warning messages in yellow.

I have an (optional) image upload field in my form which accepts only one specific image type.

If a user tries to upload a file which is NOT equal to the specified image type, should I then show the warning message or the error message?

  • If this is for a UI on a small static set of supported hardware with known app behavior expectations for a certain suite of SW, I can see the toast messages being helpful, but for anything else you should re-consider having your warnings and errors separated from the element in your UI that is causing issues for the user. One requires looking at the field they just tried to use. The other requires averting attention, reading, then reverting attention. Pretty simple, eh? Commented May 26, 2018 at 4:27

6 Answers 6


In this case since the user has tried to upload an invalid format, regardless that it is optional, it counts as an error.

Warnings and Errors can be defined as such:

WARNINGS should appear when users are about to do something that is destructive or when the result of an action is unexpected, but isn't an error.


ERROR messages are used to inform users that something went wrong and help them out.


Edit: As others have mentioned it might be a good idea to actively show preemptive warnings about format restrictions.

  • Shouldn't this event trigger a warning instead? In fact, the user is trying to perform an action in an incorrect way. A polite reminder of how to properly execute the action would be a better fit. Of course, timing is key, so the warning should be shown before attempting to perform the action in an incorrect way.
    – user68158
    Commented May 25, 2018 at 14:17
  • 5
    @Levano no, as the user's intended action (uploading an image) failed completely, no image was uploaded. Things like "The image is larger than intended and was scaled down" or "only the first 'slide' of your gif was considered,animation is lost" are warnings, "you uploaded an image that never arrived because it couldn't be processed" is an error. Commented May 25, 2018 at 21:15
  • While the logic of this answer holds in vacuum, it doesn't really respect the context of the situation. Commented May 26, 2018 at 4:23
  • @kayleeFrye_onDeck can you explain how the answer does not respect the context of the situation? I'm quite sure it does if you read the question. Commented Jun 7, 2018 at 9:05

The answer is to ensure the user is informed upfront, by including 'optional' as part of the label for the field, you could expand this to 'optional, image files only,' which would assist your users in not trying to upload incorrect files.

Similarly, the fields could include watermark placeholder text, for example, in the image upload field 'Acceptable files: jpg, gif, png.'

The error messages should be there to stop the behaviour if the other guidance has failed.


Both is possible, depending on the stage where you want to output the warning.

  • Check the filetype when the user selects the file: display a warning next to the field "the filetype is invalid and the image will be ignored"
  • Check the file only after upload: An error message "Invalid file uploaded" and possibly not storing the transaction at all before the user chooses a new image or chooses to remove the invalid one.

Simply limit the file types that can be uploaded (all other type files are grayed out).

I also want to join the recommendation of specifying filt types in the placeholder text.


In simple terms you can look at each message like this:

Warning = If user does X then the following negative instance will occur

Error = The user has performed x and now the following negative instance is occurring

Basically a warning is a precursor to the error, the error is alerting the user when something is happening in the present moment.

So in your case, if the user inputs the incorrect file type into your form, you may want to show a warning that says for example 'this file type is invalid and won't be accepted' OR once the user inputs the incorrect file type and hits the submit button, an error will show saying something like 'incorrect file type, please use x type'

This way, using a warning, will educate the user to the fact they need to use the correct file type before hitting submit.


Display warnings before users take an action that could have significant consequences. These warnings provide context and allow users to make informed decisions.

  • Before an Action: Use warnings to prevent unintended consequences.

  • While Fulfilling a Field: Use warnings for validation and input
    guidance. (ex: typing an invalid email, characters limits exceeded,
    or unique values such as a Username.)

Remember that the timing of warnings impacts user experience. Display them at the right moment to enhance usability and prevent errors. 🚀

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.