I'm encountering a strange issue that I can't quite pinpoint. It could be related to mysql, prisma, typescript, or nextjs.
I created the following model to display all product categories and add them to the database.
Prisma Model:
model ProductCategory {
id String @id @default(uuid()) @db.VarChar(128)
name String @db.VarChar(100)
desc String @db.MediumText
image Bytes @db.Blob
created_at DateTime @default(now())
modified_at DateTime @updatedAt
products Product[]
}
Categories page
import LoadImage from '@/app/components/LoadImage';
import prisma from '@/prisma/client';
const Categories = async () => {
const categories = await prisma.productCategory.findMany();
console.log(categories);
return (
<>
{categories && categories.map(({ id, desc, name, image }) => (
<div key={id} className='border rounded mx-auto max-w-[18rem] min-h-[18rem] grid grid-rows-card items-center content-center p-2'>
<LoadImage alt={name} image={image} />
<h4 className='text-lg font-medium'>{name}</h4>
<p className='text-sm'>{desc.slice(0, 80)}{desc.length > 80 && "..."}</p>
</div>
))}
</>
)
}
export default Categories
LoadImage page
"use client"
import Image from 'next/image'
interface Props {
image: Buffer,
alt: string
}
const LoadImage = ({ image, alt }: Props) => {
console.log(image);
return (!image) ? (
<div className='relative min-w-full min-h-full'>
<Image src="/fallback.jpg" layout='fill' objectFit='contain' alt={alt} />
</div>
) : (
<div className='relative min-w-full min-h-full'>
<Image src={URL.createObjectURL((new Blob([Uint8Array.from(image)])))} layout='fill' objectFit='contain' alt={alt} />
</div>
)
}
export default LoadImage
LoadImage page cannot be run on server that is why i seperated it to run on client. because of blob type. Categories page gets the categories from prisma and runs a map function display them all.
The problem I am facing is that when I console.log categories on Categories page I get following object
{
id: 'dfed08fe-036a-4256-97ec',
name: 'Dairy',
desc: 'This category includes Milk, cheese, yogurt, butter, cream, ice cream, cottage cheese...',
image: <Buffer 52 49 46 46 fa 99 00 00 57 45 42 50 56 50 38 20 ee 99 00 00 50 66 04 9d 01 2a b0 04 63 03 3e 6d 34 94 48 24 31 2d ab a7 72 fa 72 20 0d 89 67 6e 96 93 ... 39376 more bytes>,
created_at: 2023-12-29T03:30:11.517Z,
modified_at: 2023-12-29T03:30:11.517Z
}
but after I pass it to LoadImage function and console.log it surpringly becomes following object
{type: 'Buffer', data: Array(8981)}
AKA
export interface Image {
type: string;
data: Buffer;
}
API to add product category
export async function POST(request: NextRequest) {
const body = await request.formData();
const image: Blob = body.get("image") as File;
const data = {
name: body.get("name")?.toString()!,
desc: body.get("desc")?.toString()!,
image,
};
const validation = productCategorySchema.safeParse(data);
if (!validation.success) {
return NextResponse.json(validation.error.message, { status: 400 });
}
const bufferImage = Buffer.from(await image.arrayBuffer());
const newCategory = await prisma.productCategory.create({
data: {
name: data.name,
desc: data.desc,
image: bufferImage,
},
});
return NextResponse.json(newCategory);
}
I don't know what happens in the middle.
Another thing is that when adding product category I don't have to bundle image into another object and send it.
Please let me know if you need any more info. I already spend hours looking for solution but i am confused why it does that.
EDIT:
I was able to solve it using alternate method but question still remains about why there is inconsistency in data type when uploading image vs downloading.
I solved it by just passing id instead of image itself and refetching the product categories.