[bug]: Cannot read properties of undefined (reading 'ordinal')

[prpanto]

Provide environment information

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 13.25 GB / 31.36 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Describe the bug

I use a fresh Nuxt project with version 3.12.4 @uploadthing/nuxt: 6.5.9 uploadthing: 6.13.2

just copy paste the code from playground example of Nuxt and then on upload file this error show.

Link to reproduction

https://stackblitz.com

To reproduce

<UploadButton
  :config="{
    endpoint: 'imageUpload',
    onClientUploadComplete(response) {
      console.log(`onClientUploadComplete`, response);
      alert('Upload Completed');

      response[0]?.serverData;
    },
    onUploadBegin: () => {
      console.log(`onUploadBegin`);
    },
  }"
/>

import type { FileRouter } from "uploadthing/h3"
import { createUploadthing } from "uploadthing/h3"

const f = createUploadthing()

export const uploadRouter = {
  imageUpload: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
    },
  })
    .middleware(({ event }) => {
      event;

      return {}
    })
    .onUploadComplete(({ file, metadata }) => {
      file;
      metadata;

      return {}
    }),
} satisfies FileRouter

export type UploadRouter = typeof uploadRouter

Additional information

No response

👨‍👧‍👦 Contributing

• [ ] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

• [ ] I agree to follow this project's Code of Conduct

[markflorkowski]

I ran into this as well. IIRC, you need to set a logLevel in your Nuxt config:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@uploadthing/nuxt"],
  compatibilityDate: "2024-07-26",
+  uploadthing: {
+    logLevel: "info",
+  },
});

#886 Should include a fix so that this is not required, but for now manual config should do it.

[prpanto]

I add it and I have these messages:

• UploadThing dev server is now running!
• Request to https://uploadthing.com/api/prepareUpload failed with status 500

[markflorkowski]

Hmm I am able to reproduce that locally as well. If you set config: { mode: 'manual' } in your component:

<UploadButton
  :config="{
    endpoint: 'imageUpload',
    onClientUploadComplete(response) {
      console.log(`onClientUploadComplete`, response);
      alert('Upload Completed');

      response[0]?.serverData;
    },
    onUploadBegin: () => {
      console.log(`onUploadBegin`);
    },
    config: { mode: 'manual' },
  }"
/>

Does it still fail with a 500?

[prpanto]

Hmm I am able to reproduce that locally as well. If you set config: { mode: 'manual' } in your component:

<UploadButton
  :config="{
    endpoint: 'imageUpload',
    onClientUploadComplete(response) {
      console.log(`onClientUploadComplete`, response);
      alert('Upload Completed');

      response[0]?.serverData;
    },
    onUploadBegin: () => {
      console.log(`onUploadBegin`);
    },
    config: { mode: 'manual' },
  }"
/>

Does it still fail with a 500?

Now works...

How to make it to upload automatically without the option manual because right now it wants two clicks?

[markflorkowski]

Ok, that was what I was worried about. This is definitely a bug.

You can try using this canary version: @uploadthing/[email protected]

Note: I believe you will need to add an override for @uploadthing/[email protected] as well.