How to modify the fetch function for client uploads so I can include credentials

Hi folks, I am new to UploadThing and got file uploads working with my React client and Fastify API. One issue I am having is that I had to get rid of http-only cookie based auth for my JWT storage and had to fallback to local storage just so I could send my token over the wire from the file upload dropzone in the react code to my Fastify app. I use the token to validate that the user is authenticated and then upload the url to my db. Obviously storing the token in local-storage is less secure than an http-only cookie, but I cannot seem to include credentials in the uploadthing component. Does anyone know how I can send cookies (or if that's even supported in UploadThing) ?
1 Reply
mofalkmusic
mofalkmusic•3d ago
same issue. Following this thread update, issue is not the same. i am getting cookies on my backend all good:
const uploadRouter = {
imageUploader: uploadThing({
image: {
maxFileSize: "2MB",
maxFileCount: 1,
},
})
.middleware(async ({ req, res }) => {
console.log(req.cookies) // works fine...
return
})
.onUploadComplete((data) => {
console.log("upload completed", data)
})
} satisfies FileRouter
const uploadRouter = {
imageUploader: uploadThing({
image: {
maxFileSize: "2MB",
maxFileCount: 1,
},
})
.middleware(async ({ req, res }) => {
console.log(req.cookies) // works fine...
return
})
.onUploadComplete((data) => {
console.log("upload completed", data)
})
} satisfies FileRouter
Im just looking for a way to send custom authorization headers along with the upload reqs @Tanner Barcelos heyo, just worked through this on my end. may not be what you need but i thought id send here. this worked for me:
<UploadDropzone :config="{
config: {
mode: 'manual',
appendOnPaste: true,
},
headers: () => ({ 'authorization': `Bearer ${state.access_token}` }), // headers here!!
endpoint: 'imageUploader',
onClientUploadComplete: (file) => {
console.log('uploaded', file)
alert('Upload complete')
},
onUploadAborted: () => {
// todo: handle refresh on 403 ?
alert('Upload Aborted')
},
onUploadError: (error) => {
console.error(error, error.cause)
alert('Upload failed')
},
}" />
<UploadDropzone :config="{
config: {
mode: 'manual',
appendOnPaste: true,
},
headers: () => ({ 'authorization': `Bearer ${state.access_token}` }), // headers here!!
endpoint: 'imageUploader',
onClientUploadComplete: (file) => {
console.log('uploaded', file)
alert('Upload complete')
},
onUploadAborted: () => {
// todo: handle refresh on 403 ?
alert('Upload Aborted')
},
onUploadError: (error) => {
console.error(error, error.cause)
alert('Upload failed')
},
}" />
I realize you were worried more about http only cookies but yea IDK 😄 maybe this helps maybe na
Want results from more Discord servers?
Add your server