Tiptap Editor 3.0 Beta is out. Start here
Tiptap Docs

Integrate the image upload node UI component

A node for uploading images directly within the Tiptap editor, providing a drag-and-drop interface and progress tracking.

Install

You can add the node component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add image-upload-node

Manual Integration

For frameworks other than Vite or Next.js, add the node component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage 

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

NameTypeDefaultDescription
acceptstring'image/*'Acceptable file types for upload
limitnumber1Maximum number of files that can be uploaded
maxSizenumber0Maximum file size in bytes (0 for unlimited)
upload(file: File, onProgress?: Function, abortSignal?: AbortSignal) => Promise<string>undefinedFunction to handle the upload process
onError(error: Error) => voidundefinedCallback for upload errors
onSuccess(url: string) => voidundefinedCallback 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)