fix(storage-uploadthing): set url field on uploaded media documents #14250
Conversation
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
|
Just wanted to note: we're using this change in production and it seems to be working great so far! |
|
Hi team - anything I can do to help here? We have been using this change via edit: created a little tutorial on how to use pnpm-patch in case it helps anyone who finds themselves here |
|
Hi @mbifulco, point 1 (“Missing URL field on upload”) appears to be related to this issue I opened earlier today: #14562 After reviewing Payloads' source code, it looks like none of the official storage adapters set the |
|
Your PR looks great @jhb-dev - appreciate the video, that makes it super clear. Anything I can do to help with that issue at the moment? |
2 participants
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/*