---
title: Add media
description: Insert uploaded media and resolve images pasted or dragged into the editor.
order: 30
toc:
  - id: image-and-video
    title: Image and video
  - id: clipboard-images
    title: Clipboard images
  - id: editing-media
    title: Editing media
---

## Image and video {#image-and-video}

The default `Image` and `Video` actions open built-in input dialogs. A custom uploader can hand the completed payload directly to the action:

```tsx
<Image>
  {({ execute }) => (
    <ImageUploader
      onUploaded={({ src, alt, caption }) => execute({ src, alt, caption })}
    />
  )}
</Image>
```

## Clipboard images {#clipboard-images}

The full preset includes `ClipboardImages`. For production, resolve pasted and dropped files through object storage:

```tsx
<ClipboardImages
  resolveImage={async (file, { reportProgress, signal }) => {
    const uploaded = await uploadImage(file, {
      signal,
      onProgress: reportProgress,
    })
    return { alt: file.name, src: uploaded.url }
  }}
/>
```

## Editing media {#editing-media}

Selected images support resizing, captions, alignment, and visible or keyboard deletion. Non-image clipboard files remain under normal browser handling.