FileZen + BlockNote Integration

Learn how to integrate FileZen’s powerful file upload capabilities with BlockNote , the open-source block-based rich text editor, to enable seamless image uploading in your editor.

Overview

BlockNote is a beautiful, extensible rich text editor that supports drag-and-drop functionality and custom blocks. By integrating FileZen, you can provide users with instant image uploads directly within the editor, with files automatically stored and served via FileZen’s CDN.

Key Benefits

🔗 CDN Delivery: Get optimized CDN URLs for all uploaded images
📝 Metadata Support: Store file information and other metadata with uploads
🎨 Rich Integration: Seamlessly combine BlockNote editor with cloud storage

Prerequisites

Before starting, make sure you have:

Node.js 18+ installed
A FileZen account and API key
Basic knowledge of React and Next.js

Installation

First, follow the BlockNote installation guide to set up BlockNote in your project.

For FileZen integration, follow the setup guide for your framework (we’ll use Next.js as an example, but other frameworks are available in the frameworks section) to install and configure FileZen. This includes:

Installing FileZen dependencies
Setting up environment variables
Creating the API route
Configuring the provider

Once you have both BlockNote and FileZen set up, continue with the BlockNote-specific integration below.

BlockNote Integration

Upload Function

The key to integrating FileZen with BlockNote is creating a custom upload function that BlockNote can use when users drag and drop or insert images:


import { useZenClient } from '@filezen/react';
 
// Using the FileZen React hook (recommended)
const zenClient = useZenClient();
 
const uploadFile = async (file: File): Promise<string> => {
  try {
    const result = await zenClient.upload(file);
    
    if (result.error) {
      throw new Error(result.error.message);
    }
    
    // Return the CDN URL for the uploaded file
    return result.file.url;
  } catch (error) {
    console.error('Upload failed:', error);
    throw error;
  }
};
 
// Creates a new editor instance with FileZen upload integration
const editor = useCreateBlockNote({
  uploadFile,
});

Alternatively, if you’re not using the React provider pattern:


import { ZenClient } from '@filezen/js';
 
// Direct client usage (alternative approach)
const zenClient = new ZenClient({
  // apiUrl is optional - defaults to '/api/upload'
  // apiUrl: '/api/upload',
});
 
const uploadFile = async (file: File): Promise<string> => {
  try {
    const result = await zenClient.upload(file);
    
    if (result.error) {
      throw new Error(result.error.message);
    }
    
    return result.file.url;
  } catch (error) {
    console.error('Upload failed:', error);
    throw error;
  }
};
 
// Creates a new editor instance with FileZen upload integration
const editor = useCreateBlockNote({
  uploadFile,
});

Complete Editor Component

Create components/BlockNoteEditor.tsx:


'use client';
 
import { useCreateBlockNote } from '@blocknotejs/react';
import { BlockNoteView } from '@blocknotejs/mantine';
import { useZenClient } from '@filezen/react';
import '@blocknotejs/core/fonts/inter.css';
import '@blocknotejs/mantine/style.css';
 
export function BlockNoteEditor() {
  const zenClient = useZenClient();
 
  // Custom upload function for BlockNote
  const uploadFile = async (file: File): Promise<string> => {
    try {
      const result = await zenClient.upload(file);
      
      if (result.error) {
        throw new Error(result.error.message);
      }
      
      // Return the CDN URL for the uploaded file
      return result.file.url;
    } catch (error) {
      console.error('Upload failed:', error);
      throw error;
    }
  };
 
  // Create BlockNote editor with FileZen integration
  const editor = useCreateBlockNote({
    uploadFile, // This enables image upload functionality
    initialContent: [
      {
        type: 'paragraph',
        content: 'Welcome to BlockNote with FileZen! 🎉',
      },
      {
        type: 'paragraph',
        content: 'Try dragging and dropping an image into this editor.',
      },
    ],
  });
 
  return (
    <div className="editor-container">
      <BlockNoteView 
        editor={editor} 
        theme="dark" // or "light"
      />
    </div>
  );
}