# Compress File Before Uploading

Stream supports image and file uploads up to 100 MB. Compressing files before upload can help avoid hitting the limit, especially for video.

You can use the following prop on the `Channel` component to compress the file before upload:

- [`doFileUploadRequest`](/chat/docs/sdk/react-native/v8/core-components/channel/#dofileuploadrequest): For files and images picked and to be uploaded.

## Best Practices

- Compress only when needed; avoid re-encoding already small files.
- Preserve original MIME type and filename so downstream clients render correctly.
- Validate `uri`, `name`, and `type` before compression to avoid runtime failures.
- Handle failures gracefully and fall back to the uncompressed upload when possible.
- Apply the same compression policy in `MessageComposer` and `Channel` to avoid inconsistency.

The function expects a `FileReference` and returns a `Promise<MinimumUploadRequestResult>`.

`FileReference` extends the web `File` type and is defined as:

```ts
export type FileReference = Pick<File, "name" | "size" | "type"> & {
  uri: string;
  height?: number;
  width?: number;
  duration?: number;
  waveform_data?: number[];
  thumb_url?: string;
};
```

where the `type` is the MIME type of the file.

<admonition type="note">

You must specify the `uri`, `name` and `type` and possibly the `size` of the file in the `FileReference` object.

</admonition>

Example: compress a video before upload using [react-native-compressor](https://github.com/numandev1/react-native-compressor).

```tsx
import { FileReference } from "stream-chat";
import { Channel, ChannelProps } from "stream-chat-react-native";
import { Video as VideoCompressor } from "react-native-compressor";

const customDoFileUploadRequest: NonNullable<
  ChannelProps["doFileUploadRequest"]
> = async (file: FileReference) => {
  if (!file.uri) {
    throw new Error("Invalid file provided. The `uri` is required.");
  }
  // check if it is a video file using the MIME type
  if (file.type?.startsWith("video/")) {
    const result = await VideoCompressor.compress(file.uri, {
      compressionMethod: "auto",
    });
    // set the local file uri to the compressed file
    file.uri = result;
  }

  // send the file
  return channel.sendFile(file.uri, file.name, file.type);
};

<Channel channel={channel} doFileUploadRequest={customDoFileUploadRequest}>
  {/** ... */}
</Channel>;
```

You can also set this globally via `MessageComposer` using `attachments.doUploadRequest`. See [configuration setup](/chat/docs/sdk/react-native/v8/ui-components/message-input/composer/message-composer/#configuration-structure).


---

This page was last updated at 2026-04-17T17:33:45.368Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/guides/file-compression/](https://getstream.io/chat/docs/sdk/react-native/v8/guides/file-compression/).