File sharing

Users can send files such as images, audio files and videos while chatting in a channel. There are currently four different types of file messages that users can send in UIKit for React: image file, video file, audio file, and document file. These files can be sent to other participants in the channel by uploading them from the sender's device.

In order to send a file message, you must first configure to display channel messages using the OpenChannel module. To learn how to render a custom view of open channel, refer to Open channel.

To view the image in full screen, click on the

You can customize the UI for file sharing by using renderMessage as shown in the code below.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import OpenChannel from '@sendbird/uikit-react/OpenChannel';
import { useOpenChannelContext } from "@sendbird/uikit-react/OpenChannel/context";

import "@sendbird/uikit-react/dist/index.css";

const CHANNEL_URL = '...';
const APP_ID = 'YOUR_SENDBIRD_APPLICATION_ID';
const USER_ID = '...';

const CustomInput = () => {
  const { handleFileUpload } = useOpenChannelContext()

  return (
    <div>
      <input
        type="file"
        id="custom-input"
        onChange={(event) => {
          const file = event.target.files?.[0];
          if (file) handleFileUpload([file]);
        }}
      />
    </div>
  );
};

const MyApp = () => {
  return (
    <SendbirdProvider appId={APP_ID} userId={USER_ID}>
      <div style={{ height: '100vh' }}>
        <OpenChannel
          channelUrl={CHANNEL_URL}
          renderMessage={(props) => {
            const message = props.message;
            if (message.isFileMessage()) {
              return <div style={{ color: 'red' }}>{message.plainUrl || message.url}</div>;
            }
            return <div>{'custom message'}</div>;
          }}
          renderMessageInput={() => {
            return <CustomInput />;
          }}
        />
      </div>
    </SendbirdProvider>
  );
};

export default MyApp;

UIKit for React allows users to compress images when sending them to other users in the channel on a client app. By reducing the image size, they can send and receive image files faster and minimize the usage of data storage as well as the data usage. Image compression can be applied to the following image types: jpg, jpeg, and png.

Use the imageCompression prop in either the App or SendbirdProvider components.

To compress an image without changing the width and height, use the compressionRate property. To resize the width and height of an image, use the resizingWidth and resizingHeight properties.

If you assign values to compressionRate, resizingWidth, and resizingHeight simultaneously, the image will be both compressed and resized. However, for png images, if the values for all three properties are given, only resizingWidth and resizingHeight will be applied to create a compressed image. It is recommended to only assign values to resizingWidth and resizingHeight when compressing a png image.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import App from "@sendbird/uikit-react/App";

import "@sendbird/uikit-react/dist/index.css";
const Example1 = () => {
    ...
    return (
        <App
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                // The default value changed from 1.0 to 0.7 starting in v3.3.3.
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        />
    );
}
const Example2 = () => {
  ...
    return (
        <SendbirdProvider
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                // The default value changed from 1.0 to 0.7 starting in v3.3.3.
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        >
        ...
        </SendbirdProvider>
    );
}

Users can send files such as images, audio files and videos while chatting in a channel. There are currently four different types of file messages that users can send in UIKit for React: image file, video file, audio file, and document file. These files can be sent to other members in the channel by uploading them from the sender's device.

In order to send a file message, you must first configure to display channel messages using the Channel module. To learn how to render a custom view of group channel, refer to Group channel.

To view the image in full screen, click on the

You can customize the UI for file sharing by using renderMessage as shown in the code below.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
import { useGroupChannelContext } from '@sendbird/uikit-react/GroupChannel/context';

import '@sendbird/uikit-react/dist/index.css';

const CHANNEL_URL = '...';
const APP_ID = 'YOUR_SENDBIRD_APPLICATION_ID';
const USER_ID = '...';

const CustomInput = () => {
  const { sendFileMessage } = useGroupChannelContext();

  return (
    <div>
      <input
        type="file"
        id="custom-input"
        onChange={(event) => {
          const file = event.target.files?.[0];
          if (file) sendFileMessage({ file });
        }}
      />
    </div>
  );
};

const MyApp = () => {
  return (
    <SendbirdProvider appId={APP_ID} userId={USER_ID}>
      <div style={{ height: '100vh' }}>
        <GroupChannel
          channelUrl={CHANNEL_URL}
          renderMessage={(props) => {
            const message = props.message;
            if (message.isFileMessage()) {
              return <div style={{ color: 'red' }}>{message.plainUrl || message.url}</div>;
            }
            return <Message {...props} />;
          }}
          renderMessageInput={() => {
            return <CustomInput />;
          }}
        />
      </div>
    </SendbirdProvider>
  );
};

export default MyApp;

UIKit for React allows users to compress images when sending them to other users in the channel on a client app. By reducing the image size, they can send and receive image files faster and minimize the usage of data storage as well as the data usage. Image compression can be applied to the following image types: jpg, jpeg, and png.

Use the imageCompression prop in either the App or SendbirdProvider components.

To compress an image without changing the width and height, use the compressionRate property. To resize the width and height of an image, use the resizingWidth and resizingHeight properties.

If you assign values to compressionRate, resizingWidth, and resizingHeight simultaneously, the image will be both compressed and resized. However, for png images, if the values for all three properties are given, only resizingWidth and resizingHeight will be applied to create a compressed image. It is recommended to only assign values to resizingWidth and resizingHeight when compressing a png image.

import SendbirdProvider from "@sendbird/uikit-react/SendbirdProvider";
import App from "@sendbird/uikit-react/App";

import "@sendbird/uikit-react/dist/index.css";
const Example1 = () => {
    ...
    return (
        <App
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                // The default value changed from 1.0 to 0.7 starting in v3.3.3.
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        />
    );
}
const Example2 = () => {
  ...
    return (
        <SendbirdProvider
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                // The default value changed from 1.0 to 0.7 starting in v3.3.3.
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        >
        ...
        </SendbirdProvider>
    );
}

Users can share multiple images and videos in a single message through a multiple files message. UIKit for React supports this functionality with the same UI resources and image compression used for single file messages.

Make sure that your client app uses the latest version of the Chat SDK and UIKit to properly use multiple files messages.

• Sendbird Chat SDK for JavaScript v4.10.0
• Sendbird UIKit v3.7.0

Depending on the version of the SDKs, multiple files messages can't be properly drawn in the view. For example, if a client app uses the latest Chat SDK but the UIKit version lower than v3.7.0, a message containing multiple image files appears as an unknown message. As multiple files messages have their fileInfo in a different location than a single file message, the older UIKit can't read the information of the image files attached to the message. If the message contained both video and image files, the video files are sent as individual single file messages while the image files appear as a single unknown message.

To view the image in full screen, click on the

If the client app uses the Chat SDK and UIKit that don't support multiple files messages, only one file is drawn in the view as a single file message. The file that appears may vary depending on the device's OS version.

By default, multiple files messages are turned off for UIKit. In order to display them, enable the feature on the application level or the channel level by setting isMultipleFilesMessageEnabled to true as shown in the code below.

// On the application level
AppProps.isMultipleFilesMessageEnabled
// or
SendbirdProvider.isMultipleFilesMessageEnabled

// On the channel level
ChannelProps.isMultipleFilesMessageEnabled

// For message threads
ThreadProvider.isMultipleFilesMessageEnabled

By default, the UIKit allows up to ten files per message, 25MB per file. To adjust the number of file attachments, contact our Sales team and set multiple_file_send_max_size to a higher or lower number. Between the UIKit's default settings and the multiple_file_send_max_size value, the lower number is set as the maximum number of files allowed for multiple files messages.

A user can select multiple image or video files from their gallery. When the user selects both images and videos simultaneously, the image thumbnails are grouped together in the UI, while video files are shared individually.

Note: The files are sorted and ordered by the device's local file selector.

To view the image in full screen, click on the

If one of the files fails to send, the message is marked as failed. As auto resend isn't supported for multiple files messages, add a resend() option to the long-tab menu to allow the message sender to retry sending the message.

For those who receive multiple files messages, image thumbnails are grouped together on the UI and the thumbnail of video files appears individually as well.

A short-tab on the image or video file can show the file preview and a download button for individual files. Meanwhile, the vertical ellipsis menu can include reaction emojis, a delete button, and a reply button.

To view the image in full screen, click on the