[STC-645] Properly handle unsupported upload file types in CKEditor

[thykel]

Merge pre-requirement: opf/commonmark-ckeditor-build#120

Ticket

https://community.openproject.org/work_packages/STC-645

What are you trying to accomplish?

When a user drags or pastes an image of an unsupported type (e.g. WebP) into the CKEditor description field on an instance where WebP is not on the attachment allowlist, the backend already returns a clear 422 error:

"The file was rejected by an automatic filter. 'image/webp' is not allowed for upload."

However, that message was silently discarded by the frontend. The upload progress toast dismissed itself on failure without ever surfacing the error text, and a generic CKEditor indicator was shown instead — leaving the user with no actionable explanation.

This PR ensures the specific backend error message is shown to the user in an OpenProject error toast whenever an attachment upload is rejected (by file-type filter or any other server-side validation).

Screenshots

N/A

What approach did you choose and why?

Root cause: toast.component.html bound the (uploadError) output of UploadProgressComponent to remove(). The HttpErrorResponse carrying the backend message was emitted but never passed to ToastService.addError(), so the only thing that happened on failure was that the upload toast silently disappeared.

Fix — two-part:

1. ToastComponent (toast.component.ts + toast.component.html): Added an onUploadError(error: HttpErrorResponse) method that calls this.toastService.addError(error) — which already knows how to extract HAL error messages — and then removes the upload toast. The template binding was changed from (uploadError)="remove()" to (uploadError)="onUploadError($event)".

2. AttachmentsResourceService (attachments.service.ts): Added a catchError pipe in uploadAttachments() that converts the opaque HttpErrorResponse into a plain Error with the human-readable message before re-throwing. This ensures that callers further up the chain (such as the CKEditor upload plugin) receive a meaningful string rather than an unreadable object when calling loader.reject().

Why not only fix the service layer? The ToastService.addUpload() and the UploadProgressComponent are the natural point where per-file upload errors are observed; fixing the component handler is the minimal, targeted change that guarantees the message is shown exactly once without interfering with other callers. The service-layer catchError is a complementary improvement for CKEditor's own error path and does not duplicate the toast display.

No backend changes are required — the error message (not_allowlisted) already exists and is translated in all supported locales.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[github-actions]

Warning

Flaky specs

• rspec ./spec/features/projects/lists/filters_spec.rb[1:17:3:1:1]