Uploading Files
This example allows users to upload files and use them in the editor. The files are uploaded to /TMP/Files (opens in a new tab), and can be used in Image blocks.
Try it out: Click the "Add Image" button and see there's now an "Upload" tab in the toolbar!
Relevant Docs:
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.
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",
},
],
uploadFile,
});
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}