Upload Files

This example allows users to upload files and use them in the editor. The files are uploaded to /TMP/Files, and 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 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",
      },
      {
        type: "paragraph",
      },
    ],
    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 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",      },      {        type: "paragraph",      },    ],    uploadFile,  });  // Renders the editor instance using a React component.  return <BlockNoteView editor={editor} />;}

Upload Files

Learn

Collaborate

Community

Legal

Theme