iampranavdhar Posts - Answer Overflow

iampranavdhar

•Created by iampranavdhar on 10/26/2024 in #questions

Is this uploadthing only the Turborepo/t3 stack kind of setups

I have a Nodejs backend and NextJs frontend. Can't I just create an API with /api/uploadthing and use that as nrml api and call with formdata as body? I tried creating the api, it didn't work for me when we try that in postman with form data. But it will connect when we use UploadthingButton made using generateUploadButton, but when I try to use that button it throws below error. Error:

Error uploading file UploadThingError: Invalid token. A token is a base64 encoded JSON object matching { apiKey: string, appId: string, regions: string[] }.
    at eval (index.js:74:145)
    at eval (Micro.js:1614:178)
    at eval (Micro.js:1552:7)
    at eval (Micro.js:1550:7)
    at eval (Micro.js:1103:5)
    at eval (Micro.js:1743:7)

Error uploading file UploadThingError: Invalid token. A token is a base64 encoded JSON object matching { apiKey: string, appId: string, regions: string[] }.
    at eval (index.js:74:145)
    at eval (Micro.js:1614:178)
    at eval (Micro.js:1552:7)
    at eval (Micro.js:1550:7)
    at eval (Micro.js:1103:5)
    at eval (Micro.js:1743:7)

My initialization in nextjs

export const UploadButton = generateUploadButton({
  url: 'http://localhost:4000/api/uploadthing'
})

export const UploadButton = generateUploadButton({
  url: 'http://localhost:4000/api/uploadthing'
})

As per documentation, I need to give the router as generateUploadButton<router-name> but that router configuration is present in my Nodejs. My code:

 const uploadthingHandler = createRouteHandler({
      router: uploadRouter,

      config: {
        token: ENV.uploadthingToken,
      },
    });

    app.use('/api/uploadthing', uploadthingHandler);

 const uploadthingHandler = createRouteHandler({
      router: uploadRouter,

      config: {
        token: ENV.uploadthingToken,
      },
    });

    app.use('/api/uploadthing', uploadthingHandler);

import { createUploadthing, type FileRouter } from 'uploadthing/express';

const f = createUploadthing();

// FileRouter for your app
export const uploadRouter = {
  pdfUploader: f({
    pdf: {
      maxFileSize: '256MB',
      maxFileCount: 4,
    },
  }).onUploadComplete(async (data) => {
    console.log('Upload complete for userId:', data.metadata);
    console.log('File URL:', data.file.url);

    return { message: 'Upload complete' };
  }),
} as FileRouter;

export type OurFileRouter = typeof uploadRouter;

import { createUploadthing, type FileRouter } from 'uploadthing/express';

const f = createUploadthing();

// FileRouter for your app
export const uploadRouter = {
  pdfUploader: f({
    pdf: {
      maxFileSize: '256MB',
      maxFileCount: 4,
    },
  }).onUploadComplete(async (data) => {
    console.log('Upload complete for userId:', data.metadata);
    console.log('File URL:', data.file.url);

    return { message: 'Upload complete' };
  }),
} as FileRouter;

export type OurFileRouter = typeof uploadRouter;

Am I doing something wrong here ?

1 replies

Gaming

Programming