Back
How do I ust getFilePreview() on the client side?
I am using next.js and managing the session with node-appwrite. I have uploaded an image to appwrite storage. The fileId is stored in the database. Now I would like to show the user the image with the fileId.
This is my code.
TypeScript
"use server";
import { createAdminClient } from "@/lib/server/appwrite";
export async function getFilePreview(fileId: string) {
const bucketId = "66a4af5b000a38b0dd62";
const { storage } = await createAdminClient();
const result = await storage.getFilePreview(bucketId, fileId);
const blob = new Blob([result], { type: "image/webp" }); // Adjust the MIME type if necessary
return URL.createObjectURL(blob);
}
How do I use the blob in next.js <Image /> tag
TL;DR
Developers want to use `getFilePreview()` to display uploaded images in a Next.js project using Node-Appwrite.
To use the blob in `<Image />` tag, you can follow these steps:
1. Adjust the MIME type in the blob generation if needed.
2. After getting the URL from `getFilePreview()`, use it in the `src` attribute of the `<Image />` tag in Next.js, like `<Image src={URL_from_getFilePreview} alt="Image Description" />`.