Theo's Typesafe Cult•2mo ago

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•4w 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

Gaming

Programming

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