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 "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

// "Uploads" a file by encoding 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 new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(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 "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";// "Uploads" a file by encoding 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 new Promise<string>((resolve, reject) => {    const reader = new FileReader();    reader.onload = () => resolve(reader.result as string);    reader.onerror = () => reject(reader.error);    reader.readAsDataURL(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