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
},
};