Examples
UI Components
Uppy File Panel

Uppy File Panel

This example allows users to upload files using Uppy (opens in a new tab) by replacing the default File Panel with an Uppy Dashboard.

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 plugins.

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 "../../../packages/core/src/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "../../../packages/mantine/dist/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>
  );
}
Replacing Slash Menu ComponentCustom UI