# ImageUploadPreview

`ImageUploadPreview` is the default UI component for rendering a preview of attached image within `MessageInput` component.

You can replace this default UI component using the `ImageUploadPreview` prop on [Channel](/chat/docs/sdk/react-native/v4/core-components/channel/) component.

```tsx
<Channel ImageUploadPreview={CustomImageUploadPreview} />
```

## Props

### `imageUploads`

List of `image` type attachments currently attached to message, which is being composed in `MessageInput` component.

```tsx
[
  {
    file: { name: "fallback-name.jpeg" },
    id: "2j3n4k23nj4k23n4k3",
    state: "finished", // or 'uploading'
    url: "https://cdn.getstream.io/kajsnkj2n3j4", // If the state is `uploading`, then this will be a local uri of image.
  },
];
```

| Type  |
| ----- |
| array |


### `removeImage`

Removes an attached image in a message being composed in the `MessageInput` component. By default, this function is attached to `onPress` handler for close button in [ImageUploadPreview](/chat/docs/sdk/react-native/v4/core-components/channel#imageuploadpreview/).
It takes a string ID of the image to be removed in the [`imageUploads`](/chat/docs/sdk/react-native/v4/contexts/message-input-context#imageuploads/) array as parameter.

| Type                   |
| ---------------------- |
| `(id: string) => void` |


### `uploadImage`

This function is used internally by [`uploadNewImage`](/chat/docs/sdk/react-native/v4/contexts/message-input-context#uploadnewimage/) function, and is used for purpose retry mechanism.

| Type     |
| -------- |
| function |



---

This page was last updated at 2026-07-13T13:42:59.298Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/image-upload-preview/](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/image-upload-preview/).