Display validation errors

[ordago]

Initial checklist

• I understand this is a feature request and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

When a validation error occurs, the message is not prominent enough. The error is shown as a toast, but it disappears after some time. After that, the error can be seen by clicking on the question icon button, where it'll be shown to the user in an alert.

uppy/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx

Lines 109 to 110 in 12e08ad

	// eslint-disable-next-line no-alert
	onClick={() => alert(props.file.error)} // TODO: move to a custom alert implementation

Some users might not be tech-savvy enough to look for the error there.

There is also the issues mentioned in the eslint rule referenced in the code.

https://eslint.org/docs/latest/rules/no-alert

I went to the docs looking for the option to enable displaying errors, but I didn't find any.

Relevant issues:
#4079

This issue mentions localizing the error messages. But the error that would be shown would be the same as the one that is already being used in the alert.

Solution

I think an option could be added to the Dashboard to enable displaying errors

I don't know preact but I think something like this would be a starting point

It would need to add the css for the error message and set the flag.

Alternatives

Alternatively, the error could be shown as tooltip or title.

[Murderlon]

Hi, this already exists. For instance, for missing meta fields:

However it's not consistently implemented for all errors.

@arturi what do you think?

[mifi]

kind of related #5436