<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')
    },
}" />

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