TTC
Theo's Typesafe Cult•4w ago
shawn

Files uploaded, but client and server never reach onUploadComplete

My files are uploading successfully to UploadThing (I can access them in dashboard), but the loading spinner goes indefinitely on client. onUploadComplete is not being triggered on server or client, and onUploadError is not being triggered clientside either. I had everything working fine the other day on setup, not sure what I did to fuck up. No errors in log on client or server. Any help is appreciated, thanks! next: 15.2.3 uploadthing: 7.6.0 component.tsx 
<UploadButton
  endpoint="inputSource"
  onClientUploadComplete={() => {
    refetch();
  }}
  onUploadError={(error: Error) => {
    console.log('upload error', error);
  }}
  className="my-4"
/>
<UploadButton
  endpoint="inputSource"
  onClientUploadComplete={() => {
    refetch();
  }}
  onUploadError={(error: Error) => {
    console.log('upload error', error);
  }}
  className="my-4"
/>
route.ts 
import { createRouteHandler } from 'uploadthing/next';
import { uploadRouter } from './core';

export const { GET, POST } = createRouteHandler({
  router: uploadRouter,
});
import { createRouteHandler } from 'uploadthing/next';
import { uploadRouter } from './core';

export const { GET, POST } = createRouteHandler({
  router: uploadRouter,
});
core.ts 
export const uploadRouter = {
  inputSource: f({
    image: {
      maxFileSize: '8MB',
      maxFileCount: 1,
    },
  })
    .middleware(async () => {
      const { userId } = await auth();
      if (!userId) throw new UploadThingError('Unauthorized');
      return { userId };
    })
    .onUploadComplete(async ({ file }) => {
      const caller = appRouter.createCaller(await createTRPCContext());
      const { error } = await tryCatch(
        caller.input.createInputSource({
          url: file.ufsUrl,
          type: 'IMAGE',
        }),
      );
      if (error) throw new UploadThingError(error.message);
    }),
} satisfies FileRouter;
export const uploadRouter = {
  inputSource: f({
    image: {
      maxFileSize: '8MB',
      maxFileCount: 1,
    },
  })
    .middleware(async () => {
      const { userId } = await auth();
      if (!userId) throw new UploadThingError('Unauthorized');
      return { userId };
    })
    .onUploadComplete(async ({ file }) => {
      const caller = appRouter.createCaller(await createTRPCContext());
      const { error } = await tryCatch(
        caller.input.createInputSource({
          url: file.ufsUrl,
          type: 'IMAGE',
        }),
      );
      if (error) throw new UploadThingError(error.message);
    }),
} satisfies FileRouter;
3 Replies
OG3than
OG3than•3w ago
Same issue here in the exact same way, everything was working fine and now it isn't, did you find a fix for it?
shawn
shawnOP•3w ago
I'm very new, so I'm not sure exactly what the source of my issue was. But the solution for me was to make the db call directly in onUploadComplete instead of using tRPC Turns out that was the only place I needed to make that db call, so made more sense to just do it direcly instead of putting it in a procedure
feldrok - TLGM.app
feldrok - TLGM.app•2w ago
I'm also having this issue >.<

Did you find this page helpful?