CloudFront InvalidQueryStringException on Upload's "Edit" view thumbnail

[lc-51]

Describe the Bug

When deployed on CloudFront, the thumbnail in the "Edit" view for a Media collection upload is broken as the src request results in an InvalidQueryStringException.

I've had a quick look through the codebase and it appears to be caused by this line in the EditUpload component:

payload/packages/ui/src/elements/EditUpload/index.tsx

Line 177 in ca52a50

const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc

...where imageCacheTag is just the document's updatedAt property.

Presumably a simple fix would be to include a key for the query string:

const fileSrcToUse = imageCacheTag ? `${fileSrc}?imageCacheTag=${imageCacheTag}` : fileSrc

Note that a similar line is also present in the ThumbnailComponent:

payload/packages/ui/src/elements/Thumbnail/index.tsx

Line 94 in ca52a50

<img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />

...but there only seems to be one reference to this component and it doesn't pass the imageCacheTag prop:

payload/packages/ui/src/fields/Upload/RelationshipContent/index.tsx

Line 85 in ca52a50

<ThumbnailComponent

...so the issue doesn't occur in the "list view" thumbnail.

Link to the code that reproduces this issue

N/A (CloudFront-specific)

Reproduction Steps

Note that I'm using the storage-s3 plugin, but I don't think that's relevant in this case.

1. Deploy on CloudFront
2. Upload an image file to a Media (or similar) collection
3. Navigate to the list view for the collection (notice that this thumbnail does work)
4. Click on the newly created document to enter the "Edit" view
5. Notice that the thumbnail in this view is broken.

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

area: ui

Environment Info

Payload: 3.5.0
Node.js: 21.3.0
Next.js: 15.0.4

[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

[barthy-koeln]

Hey @lc-51

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.