fix(storage-uploadthing): set url field on uploaded media documents #14250
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The handleUpload function was only setting _key and filename fields from the UploadThing API response, but not the url field. This caused uploaded images to fail loading because Payload couldn't find the proper CDN URL. This fix adds data.url = res.data?.url for both main file uploads and image size variant uploads. Fixes: Images returning 400 errors when trying to load from /api/media/file/ Closes: #[ISSUE_NUMBER]
…ment JWT token requirement
This commit adds two critical fixes:
1. Uncomment disablePayloadAccessControl for public-read ACL
- When disabled/undefined, Payload cloud storage plugin does not call
adapter.generateURL() in the afterRead hook
- Without this, Payload falls back to /api/media/file/* URLs instead
of using the UploadThing CDN URLs (utfs.io)
- This makes images inaccessible since files are stored on UploadThing
2. Document JWT token format requirement in README
- UploadThing plugin requires tokens in JWT format (starting with "ey")
- Using sk_ format tokens will cause upload failures
- Added clear documentation to prevent this common mistake
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
The UploadThing storage adapter had two critical bugs that prevented images from loading correctly:
Missing URL field on upload: The
handleUploadfunction only set_keyandfilenamefields from the UploadThing API response, but not theurlfield. This caused newly uploaded images to have no URL in the database.Disabled generateURL hook: The
disablePayloadAccessControlsetting was commented out, which prevented Payload's cloud storage plugin from callingadapter.generateURL()in theafterReadhook. This caused the API to fall back to generating/api/media/file/*URLs instead of using UploadThing CDN URLs (utfs.io), making all images inaccessible.How?
This PR includes two fixes, and a documentation change:
Set URL on upload (
handleUpload.ts): Adddata.url = res.data?.urlfor both main file uploads and image size variant uploads, so newly uploaded files have the correct UploadThing CDN URL stored in the database.Enable disablePayloadAccessControl (
index.ts): Uncomment thedisablePayloadAccessControl: truesetting when ACL ispublic-read. This ensures Payload callsadapter.generateURL()when serializing documents, which generates the correct UploadThing CDN URLs for existing files.Document JWT token requirement (
README.md): Add documentation clarifying that this plugin requires UploadThing tokens in JWT format (starting withey), not thesk_secret key format. I spent a while trying to figure out why uploadThing wasn't working - their dashboard has 2 quick-copyable different formats for API key, and I was using the wrong one!Testing
https://utfs.io/f/{key}URLs instead of/api/media/file/*URLsFixes: Images returning 400 errors and failing to load from
/api/media/file/*