Upload Files

This example allows users to upload files and use them in the editor. For simplicity, files are encoded as data URLs rather than uploaded to a server, but you'd swap the uploadFile function for an upload to your own backend. The uploaded files can be used for File, Image, Video, and Audio 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 { uploadFile_DEV_ONLY } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

// "Uploads" a file using BlockNote's dev-only helper, which encodes it as a
// base64 data URL. We add a short delay first to simulate the latency of a real
// server upload. In a real app you'd replace this with an upload to your own
// backend that returns a URL to the stored file.
async function uploadFile(file: File) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return uploadFile_DEV_ONLY(file);
}

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

import { uploadFile_DEV_ONLY } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";// "Uploads" a file using BlockNote's dev-only helper, which encodes it as a// base64 data URL. We add a short delay first to simulate the latency of a real// server upload. In a real app you'd replace this with an upload to your own// backend that returns a URL to the stored file.async function uploadFile(file: File) {  await new Promise((resolve) => setTimeout(resolve, 1000));  return uploadFile_DEV_ONLY(file);}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} />;}

/// <reference types="vite-plus/client" />

/// <reference types="vite-plus/client" />

Upload Files

Learn

Collaborate

Community

Legal & Theme