Examples
Basic
Uploading Files with Uppy

Uploading Files with Uppy

This example allows users to upload files using Uppy (opens in a new tab) and use them in the editor.

Uppy is highly extensible and has an extensive ecosystem of plugins. For example, you can:

  • record audio, screen or webcam
  • import files from Box / Dropbox / Facebook / Google Drive / Google Photos / Instagram / OneDrive / Zoom
  • select files from Unsplash
  • show an image editor (crop, rotate, etc)

(in this example, we've enabled the Webcam, ScreenCapture and Image Editor plugin)

Try it out: Click the "Add Image" button and you can either drop files or click "browse files" to upload them.

Relevant Docs:

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  FilePanelController,
  FormattingToolbar,
  FormattingToolbarController,
  getFormattingToolbarItems,
  useCreateBlockNote,
} from "@blocknote/react";
 
import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
import { FileReplaceButton } from "./FileReplaceButton";
 
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",
      },
      {
        type: "paragraph",
      },
    ],
    uploadFile,
  });
 
  // Renders the editor instance using a React component.
  return (
    <BlockNoteView editor={editor} formattingToolbar={false} filePanel={false}>
      <FormattingToolbarController
        formattingToolbar={(props) => {
          // Replaces default file replace button with one that opens Uppy.
          const items = getFormattingToolbarItems();
          items.splice(2, 1, <FileReplaceButton key={"fileReplaceButton"} />);
 
          return <FormattingToolbar {...props}>{items}</FormattingToolbar>;
        }}
      />
      {/* Replaces default file panel with Uppy one. */}
      <FilePanelController filePanel={UppyFilePanel} />
    </BlockNoteView>
  );
}
Removing Default Blocks from the SchemaRemoving UI Elements