---
title: "Image Upload Node"
description: "Integrate a node UI component that adds an image upload in your Tiptap Editor. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/image-upload-node"
---

# Image Upload Node

Integrate a node UI component that adds an image upload in your Tiptap Editor. More in the docs!

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

> **Interactive demo:** [image upload node](https://template.tiptap.dev/preview/tiptap-node/image-upload-node)

## Installation

You can add the node component via Tiptap CLI

```bash
npx @tiptap/cli@latest add image-upload-node
```

## Usage

```tsx
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`](https://tiptap.dev/docs/editor/extensions/nodes/image.md) (recommended for full functionality)