Image Upload Node
Available for free
A node for uploading images directly within the Tiptap editor, providing a drag-and-drop interface and progress tracking.
Installation
You can add the node component via Tiptap CLI
npx @tiptap/cli@latest add image-upload-nodeUsage
import * as React from 'react' import { useEditor, EditorContent } from '@tiptap/react' import { ImageUploadNode } from '@/components/tiptap-node/image-upload-node' import { Image } from '@tiptap/extension-image' import { StarterKit } from '@tiptap/starter-kit' import { MAX_FILE_SIZE, handleImageUpload } from '@/lib/tiptap-utils' import '@/components/tiptap-node/image-upload-node/image-upload-node.scss' export default function EditorWithImageUpload() { const editor = useEditor({ extensions: [ StarterKit, Image, ImageUploadNode.configure({ accept: 'image/*', maxSize: MAX_FILE_SIZE, limit: 3, upload: handleImageUpload, onError: (error) => console.error('Upload failed:', error), }), ], content: '<p>Try uploading an image!</p>', }) React.useEffect(() => { if (!editor) { return } editor.chain().focus().setImageUploadNode().run() }, [editor]) return <EditorContent editor={editor} /> }Props
| Name | Type | Default | Description |
|---|---|---|---|
| accept | string | 'image/*' | Acceptable file types for upload |
| limit | number | 1 | Maximum number of files that can be uploaded |
| maxSize | number | 0 | Maximum file size in bytes (0 for unlimited) |
| upload | (file: File, onProgress?: Function, abortSignal?: AbortSignal) => Promise<string> | undefined | Function to handle the upload process |
| onError | (error: Error) => void | undefined | Callback for upload errors |
| onSuccess | (url: string) => void | undefined | Callback for successful uploads |
Features
- Drag-and-drop file upload
- File size validation
- Upload progress tracking
- File type filtering
- Abortable uploads
- Visual feedback during upload process
- Seamless replacement with Image node after upload
Requirements
Used reference components
close-icon(icon)
Open source feature(s)
@tiptap/react@tiptap/extension-image(recommended for full functionality)