Image Toolbar ​

The Image Toolbar appears whenever you select an image that doesn't have a URL, or when you click the "Replace Image" button in the Formatting Toolbar when an image is selected.

Image Upload ​

You may notice that upon creating a new BlockNote editor, the "Upload" tab in the Image Toolbar is missing. This is because you must provide BlockNote with a function to handle file uploads using the uploadFile Editor Option:

type uploadFile = (file: File) => Promise<string>;

file: The file to upload, in this case an image.

returns: A Promise, which resolves to the URL that the image can be accessed at.

You can use the provided uploadToTempFilesOrg function to as a starting point, which uploads files to tmpfiles.org. However, it's not recommended to use this in a production environment - you should use your own backend: