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 prop on the Channel component to compress the file before upload:

• doFileUploadRequest: For files and images picked and to be uploaded.

The function expects a FileReference type as far React Native SDK is concerned and returns a Promise that resolves to a MinimumUploadRequestResult object.

The FileReference is extend of the File type of Web and is defined as follows:

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.

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 { 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 await channel.sendFile(file.uri, file.name, file.type);
};

<Channel channel={channel} doFileUploadRequest={customDoFileUploadRequest}>

You can set it to the global message composer configuration as well, using the doUploadRequest key on the attachments config object on the MessageComposer. Follow the guide here to setup the config.