Examples
Basic
Uploading Files

Uploading Files

This example allows users to upload files and use them in the editor. The files are uploaded to /TMP/Files (opens in a new tab), and can be used in Image blocks.

Try it out: Click the "Add Image" button and see there's now an "Upload" tab in the toolbar!

Relevant Docs:

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import "@blocknote/react/style.css";
 
// Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
async function uploadFile(file: File) {
  const body = new FormData();
  body.append("file", file);
 
  const ret = await fetch("https://tmpfiles.org/api/v1/upload", {
    method: "POST",
    body: body,
  });
  return (await ret.json()).data.url.replace(
    "tmpfiles.org/",
    "tmpfiles.org/dl/"
  );
}
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "Upload an image using the button below",
      },
      {
        type: "image",
      },
    ],
    uploadFile,
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}
Manipulating BlocksSaving & Loading