Wrong files (low-res previews) are downloaded from image posts

https://github.com/mattermost/mattermost/issues/24392

Summary

Right-clicking an image in chat offers to save it, but it's the preview, not the sent file.

Steps to reproduce

Post any image, preferably one greater than the max preview width (1920 pixels), and with some meta data like EXIF in a JPEG.

Expected behaviour

Interacting with the image should deliver the original, not the preview.

Observed behaviour

Previews are sent instead which can be, resized, the wrong type, and lower quality.

Non-technical users don't understand they're getting the wrong file, and it's entirely because of your UI.

More info

This was discussed extensively in pull mattermost/mattermost-webapp#11773, and it was agreed the the patch was not the best way to solve it, but the issue is still present in v8.1.

From this comment:

I just tested a post of a large image in an old Slack account. The resized thumbnail present in the channel showed no image context menu options, they block them with an ::after pseudo-element, which is actually a better solution than I wrote. All the link options were directly to the full sized image:

In Slack, Expanding that preview shows the original image, unlike Mattermost which still shows the preview version in the expanded view. I hadn't tested this in Slack before now, and their choice validates what I was trying to accomplish here.

Slack is getting this right, a preview that links and expands to the original, Mattermost is not. This was in the last responses

And will also keep an eye out for users reporting this particular issue to understand the severity of it.

I think Mm devs are being naive if they think the average user is going to know about GitHub, let alone create an account and report a UI issue, when they don't even realise they've downloaded the wrong image

---

Proposed solution

It would be an improvement to consider the following:

• wrap preview images in <a> tags with the link pointing to the original image file (but clicking should still open the gallery)
• update the gallery fullscreen view to also wrap the image in an <a> tag with the link pointing to the original image file (rather than href="#")

Cases

1. When a single image is posted as a file attachment:
   1. Right clicking on the image in the post and selecting Copy Link or Open Link in New Tab should use the URL of the file attachment (<server>/api/v4/files/<file id>)
   2. Clicking on the image in the post should open the preview modal
   3. Right clicking on the image in the preview modal and selecting Open Link or Open Link in New Tab should use the URL of the file attachment (<server>/api/v4/files/<file id>)
2. When a user posts a Markdown image (eg. ![example PNG](https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png))
   1. Right clicking on the image in the post and selecting Copy Link or Open Link in New Tab should use the URL of the original image (eg. https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png). If an image proxy is enabled, it should not use the proxied image URL (<server>/api/v4/image?url=...).
   2. Clicking on the image in the post should open the preview modal
   3. After clicking on the preview image to open the preview modal, right clicking on the image and selecting Open Link or Open Link in New Tab should use the URL of the file attachment (eg. https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png). If an image proxy is enabled, it should not use the proxied image URL (<server>/api/v4/image?url=...).
3. When a user posts a link which displays an image preview (eg. https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png), it should behave the same as the Markdown image above

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-54267