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" />`.

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support