My upload button receives the presignedUrls from the server but when fetching the url it hangs.

<UploadButton
  endpoint='imageUploader'
  onUploadError={(error: Error) => {
    toast.error('Upload Failed: ' + error.message);
  }}
  onClientUploadComplete={(res) => {
    // this never fires
    toast.success('Upload Successful');
  }}
  onBeforeUploadBegin={(files) => {
    return files.map((f) => new File([f], uuid(), { type: f.type }));
  }}
  headers={{
    ...csrfHeaders,
  }}
/>

<UploadButton
  endpoint='imageUploader'
  onUploadError={(error: Error) => {
    toast.error('Upload Failed: ' + error.message);
  }}
  onClientUploadComplete={(res) => {
    // this never fires
    toast.success('Upload Successful');
  }}
  onBeforeUploadBegin={(files) => {
    return files.map((f) => new File([f], uuid(), { type: f.type }));
  }}
  headers={{
    ...csrfHeaders,
  }}
/>

export const uploadRouter = {
  imageUploader: f({
    image: {
      maxFileSize: '4MB',
      maxFileCount: 1,
    },
  })
  .onUploadComplete(async (data) => {
    // Never reaches
    console.log('data', data);
  })
} satisfies FileRouter;

export const uploadRouter = {
  imageUploader: f({
    image: {
      maxFileSize: '4MB',
      maxFileCount: 1,
    },
  })
  .onUploadComplete(async (data) => {
    // Never reaches
    console.log('data', data);
  })
} satisfies FileRouter;