onUploadCompleted not triggered in client upload route

[dejoma]

Package.json info: "next": "13.5.3", "@vercel/blob": "^0.13.1"

Client side code

// 'use client' component in NextJS
const newBlob = await upload(`${fields.isbn}.${extension}`, file, {
        access: 'public',
        handleUploadUrl: '/api/books/upload',
        clientPayload: JSON.stringify(data)
      });

---

API endpoint in NextJS app router

Note that this code is 100% copied from https://vercel.com/docs/storage/vercel-blob/quickstart

// src/app/api/books/upload/route.ts
export async function POST(request: Request): Promise<NextResponse> {
  const body = (await request.json()) as HandleUploadBody;

  try {
    const jsonResponse = await handleUpload({
      body,
      request,
      onBeforeGenerateToken: async (
        pathname: string,
        clientPayload?: string
      ) => {
        await schema.parse(JSON.parse(clientPayload!));
        const user = await currentUser();
        if (user?.publicMetadata.role !== 'admin') {
          throw new Error('Not authorized');
        }

        return {
          allowedContentTypes: ['application/pdf', 'application/epub+zip'],
          tokenPayload: clientPayload
        };
      },
      onUploadCompleted: async ({
        blob,
        tokenPayload
      }: {
        blob: PutBlobResult;
        tokenPayload?: string;
      }) => {
        console.log('Unfortunately this is not being executed yet - support case opened');
      }
    });

    return NextResponse.json(jsonResponse);
  }

Also note that the uploads all succeed, and I've tried on:

• localhost:3000
• vercel development environments e.g. my-app.vercel.app It's just the callback that is not triggered.

Support case number: #00163141 (no answers there yet)

[vvo]

Hi @dejoma, would it be feasible for you to send us your Vercel development environment page where we can do tests? (eg my-app.vercel.app)?

As for local development, unless you're using something like ngrok, which will expose your localhost:3000 to an internet address, onUploadCompleted won't work, as we cannot reach localhost:3000 from the internet. Are you using ngrok?

[dejoma]

I mean I can create a new app/env where I copy the documentation code, but the logs will still be server logs which you wont see?

[vvo]

We could never reproduce this issue, @dejoma if you can create a GitHub repository that demonstrates this issue with minimal reproduction code then we're all in to give it another try and reopen this issue. Thank you 🙏