fix(file-input): reject unsupported image formats on upload#868
fix(file-input): reject unsupported image formats on upload#868DanMyers300 wants to merge 3 commits intostoatchat:mainfrom
Conversation
When a user selects an image file whose MIME type is not in the allowed list (JPEG, PNG, GIF, WebP), the file is now rejected and an error modal is shown instead of silently accepting it. This prevents formats like AVIF from being uploaded when the backend does not support them. Signed-off-by: Dan <contact@danmyers.net>
2026-02-21.15-50-48.mp4 |
|
Would be nice if you could give more information to the user, such as a list of the supported formats. |
Thanks for the suggestion. I've included a message showing what file types are permitted. 
|
…r message Signed-off-by: Dan <contact@danmyers.net>
In the long term, it might be better to not hardcode any of these. |
…_TYPE_LABELS array Signed-off-by: Dan <contact@danmyers.net>
Good call! I've gone ahead and done exactly that. I added an ALLOWED_IMAGE_TYPE_LABELS array in Draft.ts right next to ALLOWED_IMAGE_TYPES, and the error message now builds the format list dynamically from it. I could programmatically derive the image labels from the image types list but I thought it would be nice to have an image label list as well in the future. |
| // FileInput resets to null before passing the new file for | ||
| // reactivity reasons, so restore the last accepted value |
There was a problem hiding this comment.
Maybe we can fix the root cause here instead of doing a workaround?
3 participants
Summary
Fixes #859
The server banner (and other image file inputs) allowed .avif and other unsupported formats to be selected and submitted, despite the backend rejecting them.
What changed
Form2.FileInput now validates the selected file's MIME type against the list of supported image formats (image/jpeg, image/png, image/gif, image/webp) before accepting it. If an unsupported format is chosen, an error modal is shown and the file is not set on the form control.
This is enforced in the shared Form2.FileInput wrapper, so it covers all image upload inputs across the app (server banners, user profile banners, server icons, channel icons, avatars, and webhook avatars).
Testing
Try uploading an .avif file to the server banner, you should now see an error modal with the message "The file '...' has an unsupported format." and the banner should remain unchanged.