Docs | Image Upload

The default rich editor doesn't come with any image uploading features, you have to configure it manually to integrate with AWS S3, Cloudinary or other cloud storage services.

Here is an example for Cloudinary, with unauthorized requests:

import type { StorageContext } from "@fuma-comment/react";
import { Comments, StorageProvider } from "@fuma-comment/react";
 
const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME;
 
const storage: StorageContext = {
  enabled: true,
  async upload(file) {
    const body = new FormData();
    body.append("file", file);
    body.append("upload_preset", "fuma_comment");
 
    const res = await fetch(
      `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
      {
        method: "POST",
        body,
      },
    );
 
    if (res.ok) {
      const result = (await res.json()) as {
        secure_url: string;
        width: number;
        height: number;
      };
 
      return {
        url: result.secure_url,
        width: result.width,
        height: result.height,
      };
    }
 
    throw new Error("Failed to upload file");
  },
};
 
export function CommentsWithAuth() {
  return (
    <StorageProvider storage={storage}>
      <Comments />
    </StorageProvider>
  );
}

Renderer

Fuma Comment uses a img tag with max width (600px) and max height (400px) to render images.

To customise it, or use the next/image component on Next.js, specify a renderer with:

import type { StorageContext } from "@fuma-comment/react";
 
const storage: StorageContext = {
  enabled: true,
  render: (props) => {
    // component
  },
};

Image Upload

Renderer

On this page