Compress File Before Uploading

Stream supports uploading images and files and the maximum size to upload is 100 MB. It can be useful in certain cases to compress a file before upload so that the 100 MB limit is not reached. This is especially true when uploading Video.

You can use the following two props on the Channel component to compress the file before upload:

doImageUploadRequest: For images
doDocUploadRequest: For any files other than images

For example, let us look at how to compress a video file before uploading. In the snippet below, we have used the react-native-compressor library to perform video compression before the video file is uploaded.

import { Channel, ChannelProps } from 'stream-chat-react-native';
import { Video as VideoCompressor } from 'react-native-compressor';

const customDoDocUploadRequest: NonNullable<ChannelProps['doDocUploadRequest']> = async (
  file,
  channel,
) => {
  if (!file.uri) {
    throw new Error('Invalid file provided');
  }
  // check if it is a video file using the MIME type
  if (file.mimeType?.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 await channel.sendFile(file.uri, file.name, file.mimeType);
};

<Channel channel={channel} doDocUploadRequest={customDoDocUploadRequest}>

Custom Message UI

Blocking Users