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
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server