nyanSpruk Posts - Answer Overflow

nyanSpruk

•Created by nyanSpruk on 5/4/2024 in #questions

Api Route or Server Action for ImageKit upload

I am currently trying to make a form and on submit want to upload an image to Imagekit. Currently I am trying to do it with a server action, but am not sure if I should use a api route instead. That is because of the following error:

Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

My code looks like this:

  function onSubmit(values: z.infer<typeof formSchema>) {
    let res = fileUpload(values.image[0]);
// Other code
  }

  function onSubmit(values: z.infer<typeof formSchema>) {
    let res = fileUpload(values.image[0]);
// Other code
  }

My server action

"use server";

import ImageKit from "imagekit";

const imageKit = new ImageKit({
  publicKey: process.env.IMAGEKIT_PUBLIC_KEY!,
  privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
  urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT!,
});

export const fileUpload = async (file: File) => {
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

  const response = await imageKit.upload({
    file: buffer,
    fileName: file.name,
    useUniqueFileName: true,
    tags: ["post"], // TODO: Add tags
  });

  return response;
};

"use server";

import ImageKit from "imagekit";

const imageKit = new ImageKit({
  publicKey: process.env.IMAGEKIT_PUBLIC_KEY!,
  privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
  urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT!,
});

export const fileUpload = async (file: File) => {
  const arrayBuffer = await file.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);

  const response = await imageKit.upload({
    file: buffer,
    fileName: file.name,
    useUniqueFileName: true,
    tags: ["post"], // TODO: Add tags
  });

  return response;
};

Thank You

2 replies

TTCTheo's Typesafe Cult

•Created by nyanSpruk on 4/27/2024 in #questions

t3 starter app with nextauth auth.ts config problems

const config = {
  providers: [GoogleProvider, FacebookProvider],
  adapter: DrizzleAdapter(db, createTable) as Adapter,
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

const config = {
  providers: [GoogleProvider, FacebookProvider],
  adapter: DrizzleAdapter(db, createTable) as Adapter,
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

i copied the code from the origina t3 app into auth.ts in root (like it is suposed to be in v5 of nextauth) I am getting the following error:

[auth][error] AdapterError: Read more at https://errors.authjs.dev#adaptererror
[auth][cause]: AggregateError
    at internalConnectMultiple (node:net:1114:18)
    at afterConnectMultiple (node:net:1667:5)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)
[auth][details]: {}
[auth][error] SessionTokenError: Read more at https://errors.authjs.dev#sessiontokenerror
[auth][cause]: AggregateError
    at internalConnectMultiple (node:net:1114:18)
    at afterConnectMultiple (node:net:1667:5)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)
[auth][details]: {}
 GET /?_rsc=r3yhw 200 in 42ms

[auth][error] AdapterError: Read more at https://errors.authjs.dev#adaptererror
[auth][cause]: AggregateError
    at internalConnectMultiple (node:net:1114:18)
    at afterConnectMultiple (node:net:1667:5)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)
[auth][details]: {}
[auth][error] SessionTokenError: Read more at https://errors.authjs.dev#sessiontokenerror
[auth][cause]: AggregateError
    at internalConnectMultiple (node:net:1114:18)
    at afterConnectMultiple (node:net:1667:5)
    at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)
[auth][details]: {}
 GET /?_rsc=r3yhw 200 in 42ms

2 replies

TTCTheo's Typesafe Cult

•Created by nyanSpruk on 4/27/2024 in #questions

Create t3 app with nextauth and new router problems

I have a question regarding the t3-createapp with nextauth. In what file do I put my <SessionProvider> ? I would've assumed that the t3 app generator would handle that for me, but it didn't, and im not sure where to put it. I am trying to do it in the app/layout.tsx like i did with my normal next project that im using for reference, but its not working. the t3 nextauth documentation only has pages router and no app router documentation. (EDIT: it may be the problem that t3 uses nextuath v4 instead of v5 (that is still in beta,That must be it) that im used to. i guess i should look into the upgrade guide)

2 replies

Gaming

Programming