Unable to upload images (using uploadthing api) in production website (live site in vercel)

[captain-Akshay]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #28-Ubuntu SMP PREEMPT_DYNAMIC Wed Jul 12 22:39:51 UTC 2023
    Binaries:
      Node: 20.3.1
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/captain-Akshay/nextNation

To Reproduce

next.config file

const nextConfig = {
  images: {
    domains: [
      "uploadthing.com",
      "lh3.googleusercontent.com",
      "avatars.githubusercontent.com",
      "images.unsplash.com",
      "icon-library.com",
    ],
  },
  experimental: {
    appDir: true,
  },
  env: {
    RAPID_API_KEY:""
  },
};
module.exports = nextConfig;

uploadthing core.ts

import { getToken } from 'next-auth/jwt'
import { createUploadthing, type FileRouter } from 'uploadthing/next'

const f = createUploadthing()

export const ourFileRouter = {
  imageUploader: f({ image: { maxFileSize: '16MB' } })
    .middleware(async (req) => {
      const user = await getToken({ req })

      if (!user) throw new Error('Unauthorized')

      return { userId: user.id }
    })
    .onUploadComplete(async ({ metadata, file }) => {}),
} satisfies FileRouter

export type OurFileRouter = typeof ourFileRouter

route.ts

import { createNextRouteHandler } from 'uploadthing/next'

import { ourFileRouter } from './core'

// Export routes for Next App Router
export const { GET, POST } = createNextRouteHandler({
  router: ourFileRouter,
})

on the localhost npm its running completely fine images are getting upload and shown properly but in production service. error

Error: Failed to get presigned URLs
    i NextJS
[page-ad9751b90f626cef.js:1:6023](https://next-nation.vercel.app/_next/static/chunks/app/p/create/page-ad9751b90f626cef.js)

Describe the Bug

here the error is sometimes 404 or 400 presigned URL error. when i upload image in the production live site.

Expected Behavior

it was supposed to same in the local mode as in the production mode . uploading images should be upload the image.

Which browser are you using? (if relevant)

firefox

How are you deploying your application? (if relevant)

Vercel

[rishav887]

any luck on this ? even i am facing the same

[markflorkowski]

Looks like the authentication you have set up in your middleware is not working correctly for some reason. Seems like a next-auth configuration issue of some form perhaps?

[astro-jets]

How can I solve this I am getting the same error

[nativenotifydev]

Hello, has anyone solved this

i am trying to upload images/video through utapi.uploadFiles(files);

it need the type to be FileEsque

const files = formData.getAll('files') as FileEsque[];

though the file is getting uploaded in localhost the file is giving { data: null, error: { code: 'BAD_REQUEST', message: 'Failed to upload file.', data: undefined } } when trying to add media from hosted site in vercel