File sharing | UIKit React SDK

UIKit React v3

UIKit React

UIKit

React

Home

UIKit

React

This is the new Docs for UIKit v3 for React. To see the previous Docs, click here.

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.

Open channel

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.

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 withSendbird from "@sendbird/uikit-react/withSendbird";
import sendbirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";
import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext";

// For TypeScript, import type { FileMessageCreateParams } from '@sendbird/chat/message';

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

const CHANNEL_URL = "...";
const APP_ID = "...";
const USER_ID = "...";

const CustomInput = () => {
    const state = useSendbirdStateContext();
    const sdk = sendbirdSelectors.getSdk(state);
    const sendFileMessage = sendbirdSelectors.getOpenChannelSendFileMessage(
        state
    );
    return (
        <div>
        <input
            type="file"
            id="custom-input"
            onChange={() => {
                // For TypeScript, use const params: FileMessageCreateParams = {};
                const params = {};
                // Do the required manipulations.
                params.file = document.querySelector("#custom-input").files[0];
                sendFileMessage(CHANNEL_URL, params);
            }}
        />
        </div>
    );
};

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

export default MyApp;

Image compression

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.

Property	Type	Description
compressionRate	number	The value of the compression rate to apply to the image. Acceptable values are 0.0 to 1.0, inclusive. (Default: `1.0`)
resizingWidth	number or string	The new `width` to apply to the image, in pixel. Acceptable values are either `number` or `string`, and when it's `string`, it should be specified in px.
resizingHeight	number or string	The new `height` to apply to the image, in pixel. Acceptable values are either `number` or `string`, and when it's `string`, it should be specified in px.

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,
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        />
    );
}
const Example2 = () => {
  ...
    return (
        <SendbirdProvider
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        >
        ...
        </SendbirdProvider>
    );
}

Group channel

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.

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 Channel from "@sendbird/uikit-react/Channel";
import sendbirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";
import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext";

// For TypeScript, import type { FileMessageCreateParams } from '@sendbird/chat/message';
import "@sendbird/uikit-react/dist/index.css";

const CHANNEL_URL = "...";
const APP_ID = "...";
const USER_ID = "...";

const CustomInput = () => {
    const state = useSendbirdStateContext();
    const sdk = sendbirdSelectors.getSdk(state);
    const sendFileMessage = sendbirdSelectors.getSendFileMessage(state);
    return (
        <div>
            <input
                type="file"
                id="custom-input"
                onChange={() => {
                    // For TypeScript, use const params: FileMessageCreateParams = {};
                    const params = {};
                    // Do the required manipulations.
                    params.file = document.querySelector("#custom-input").files[0];
                    sendFileMessage(CHANNEL_URL, params);
                }}
            />
        </div>
    );
};

const MyApp = () => {
    return (
        <SendbirdProvider
            appId={APP_ID}
            userId={USER_ID}
        >
            <div style={{ height: "100vh" }}>
                <Channel
                    channelUrl={CHANNEL_URL}
                    renderMessage={(message, channel) => {
                        if (message.messageType === "file") {
                            return () => (
                                <div style={{ color: "red" }}>
                                    {message.plainUrl || message.url}
                                </div>
                            );
                        }
                    }}
                    renderMessageInput={() => {
                        return <CustomInput />;
                    }}
                />
            </div>
        </SendbirdProvider>
    );
};

export default MyApp;

Image compression

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

Property	Type	Description
compressionRate	number	The value of the compression rate to apply to the image. Acceptable values are 0.0 to 1.0, inclusive. (Default: `1.0`)
resizingWidth	number or string	The new `width` to apply to the image, in pixel. Acceptable values are either `number` or `string`, and when it's `string`, it should be specified in px.
resizingHeight	number or string	The new `height` to apply to the image, in pixel. Acceptable values are either `number` or `string`, and when it's `string`, it should be specified in px.

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,
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        />
    );
}
const Example2 = () => {
  ...
    return (
        <SendbirdProvider
            appId={appId}
            userId={userId}
            imageCompression={{
                compressionRate: 0.5,
                resizingWidth: 200,
                resizingHeight: '200px',
            }}
        >
        ...
        </SendbirdProvider>
    );
}