File / image uploading

This example registers an uploadFile handler. This makes it possible for users to upload files to the editor.

Try it out: Insert an image (by typing / and selecting image) and notice how it's now possible to upload a file from your local device.

Relevant Docs:

TODO

import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
 
/**
 * Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
 *
 * @warning This function should only be used for development purposes, replace with your own backend!
 */
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({ uploadFile });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Saving & Loading Keyboard Shortcuts