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.

UploadThing

We have a built-in integration:

import { Comments } from "@fuma-comment/react";
import { createUploadThingStorage } from "@fuma-comment/react/uploadthing";
 
const storage = createUploadThingStorage();
 
export function CommentsWithAuth() {
  return (
    <Comments
      storage={storage}
      auth={
        {
          // auth config
        }
      }
    />
  );
}

Cloudinary

Here is an example for Cloudinary, with unauthorized requests:

import type { StorageContext } from "@fuma-comment/react";
import { Comments } 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 (
    <Comments
      storage={storage}
      auth={
        {
          // auth config
        }
      }
    />
  );
}

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

UploadThing

Cloudinary

Renderer

On this page