# AttachmentUploadProgressIndicator

`AttachmentUploadProgressIndicator` documents the indicator components used by upload previews and pending message attachments.

These are the default inline indicators shown for in-progress, retryable, and not-supported attachment upload states. The in-progress indicators read upload state from `client.uploadManager` when they receive a pending attachment `localId`.

## Components

### `FileUploadInProgressIndicator`

Shown while a file or audio upload is actively in progress. It renders `AttachmentUploadIndicator` plus a `uploaded / total` file-size label when `totalBytes` is available.

### `ImageUploadInProgressIndicator`

Shown while an image or video upload is actively in progress. It renders `AttachmentUploadIndicator` in overlay mode.

### `AttachmentUploadIndicator`

Shared upload indicator used by composer previews and message-list attachments. It subscribes to `client.uploadManager` with `usePendingAttachmentUpload(localId)` and renders either a determinate circular progress ring or an `ActivityIndicator`.

### `CircularProgressIndicator`

Circular progress ring used by `AttachmentUploadIndicator`. Override this when you want to keep the SDK upload-state wiring but replace the ring UI.

### `MediaUploadProgressOverlay`

Full-cover overlay used for image and video thumbnails while pending uploads are active.

## Props

### `FileUploadInProgressIndicator`

| Prop         | Description                                              | Type                       |
| ------------ | -------------------------------------------------------- | -------------------------- |
| `localId`    | Local attachment id used to read `client.uploadManager`. | `string`                   |
| `sourceUrl`  | Local source URL for the pending attachment.             | `string`                   |
| `totalBytes` | Total file size used to render the uploaded-size label.  | `number \| string \| null` |

### `ImageUploadInProgressIndicator`

| Prop        | Description                                              | Type     |
| ----------- | -------------------------------------------------------- | -------- |
| `localId`   | Local attachment id used to read `client.uploadManager`. | `string` |
| `sourceUrl` | Local source URL for the pending attachment.             | `string` |

### `AttachmentUploadIndicator`

| Prop             | Description                                                               | Type                     |
| ---------------- | ------------------------------------------------------------------------- | ------------------------ |
| `containerStyle` | Style applied to the compact indicator container.                         | `StyleProp<ViewStyle>`   |
| `localId`        | Local attachment id used to read `client.uploadManager`.                  | `string`                 |
| `size`           | Indicator diameter. Defaults to `16`, or `28` for overlay mode.           | `number`                 |
| `sourceUrl`      | Local source URL for the pending attachment.                              | `string`                 |
| `strokeWidth`    | Circular progress stroke width. Defaults to `2`, or `3` for overlay mode. | `number`                 |
| `style`          | Style applied to the rendered indicator.                                  | `StyleProp<ViewStyle>`   |
| `testID`         | Test id for the indicator.                                                | `string`                 |
| `variant`        | Visual variant. Defaults to `'compact'`.                                  | `'compact' \| 'overlay'` |

### `CircularProgressIndicator`

| Prop              | Description                              | Type                   |
| ----------------- | ---------------------------------------- | ---------------------- |
| `backgroundColor` | Fill color behind the progress ring.     | `ColorValue`           |
| `filledColor`     | Filled progress stroke color.            | `ColorValue`           |
| `progress`        | Upload progress from `0` to `100`.       | `number`               |
| `unfilledColor`   | Unfilled progress stroke color.          | `ColorValue`           |
| `size`            | Indicator diameter. Defaults to `16`.    | `number`               |
| `strokeWidth`     | Progress stroke width. Defaults to `2`.  | `number`               |
| `style`           | Style applied to the rendered indicator. | `StyleProp<ViewStyle>` |
| `testID`          | Test id for the indicator.               | `string`               |

### `MediaUploadProgressOverlay`

| Prop          | Description                             | Type     |
| ------------- | --------------------------------------- | -------- |
| `progress`    | Upload progress from `0` to `100`.      | `number` |
| `size`        | Indicator diameter. Defaults to `18`.   | `number` |
| `strokeWidth` | Progress stroke width. Defaults to `3`. | `number` |
| `testID`      | Test id for the overlay content.        | `string` |

### `FileUploadRetryIndicator`

| Prop      | Description                                         | Type         |
| --------- | --------------------------------------------------- | ------------ |
| `onPress` | Callback fired when the retry indicator is pressed. | `() => void` |

### `FileUploadNotSupportedIndicator`

| Prop            | Description                                          | Type                            |
| --------------- | ---------------------------------------------------- | ------------------------------- |
| `localMetadata` | Upload metadata for the unsupported file attachment. | `LocalAttachmentUploadMetadata` |

### `ImageUploadRetryIndicator`

| Prop             | Description                                         | Type         |
| ---------------- | --------------------------------------------------- | ------------ |
| `onRetryHandler` | Callback fired when the retry indicator is pressed. | `() => void` |

### `ImageUploadNotSupportedIndicator`

`ImageUploadNotSupportedIndicator` has no props.

## Custom upload progress UI

For custom indicators, use the `usePendingAttachmentUpload` hook instead of subscribing to `client.uploadManager` manually.

```tsx
import { Text, View } from "react-native";
import {
  Channel,
  MessageComposer,
  MessageList,
  WithComponents,
  usePendingAttachmentUpload,
} from "stream-chat-react-native";

const CustomAttachmentUploadIndicator = ({ localId }) => {
  const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId);

  if (!isUploading) {
    return null;
  }

  return (
    <View>
      <Text>{Math.round(uploadProgress ?? 0)}%</Text>
    </View>
  );
};

<WithComponents
  overrides={{ AttachmentUploadIndicator: CustomAttachmentUploadIndicator }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;
```

---

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