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.
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.
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: