Image Preview is not working for Media

[vaibhav0524]

Describe the Bug

I have a Media collection in that Image Preview is not working after we upload the image. We are using blob storage, once we upload the image then url is generated but at the end of the url string ?date-time is appended. I saw in the API tab, our thumbnail url is also correct but in the img src url somehow due to ?date-time appended string img is not visible.

You can see the img url in the dev tools, due to that highlighted green one. Image Preview is not working.

How that ?date-time is appending in the src url is the issue. Please have a look to it.

Link to the code that reproduces this issue

NA

Reproduction Steps

1. Create a new Media Collection.
2. Upload image, you must have some blob containers where you are storing images as we also have used Azure Blob storage for image storage.
3. Once you upload img, see the url of the img. It is fine but when you inspect you will see ?date-time is appended in the src url of the img.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

"payload": "3.2.1",
"next": "15.0.0",
"node": "^18.20.2 || >=20.9.0"

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[lc-51]

@vaibhav0524, where are you deploying to? I'm having a similar issue (#9880) when deploying to CloudFront, using S3 storage for Media. I wonder if this might also apply to other deployment environments. It's working on dev for me, but in staging, CloudFront throws an InvalidQueryStringException.

[vaibhav0524]

Hey @lc-51, we are using Azure Blob storage to store the Medias. I'm also facing same issue, Media is visible properly in the list view in collection but while editing or uploading new media in the edit view it's thumbnail is not working.

[barthy-koeln]

Hey @vaibhav0524

I've created a new issue with a reproducer in #10139 .
If you can verify that this is the same bug, please consider closing this issue in favor of mine. The info will still be here, but we can reduce some noise for the payload team.

Edit: @PatrikKozak didn't see you were assigned already. Well… can't have too many reproducers, right? :D