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.
You can customize the UI for file sharing by using renderMessage
as shown in the code below.
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 |
resizingWidth | number or string | The new |
resizingHeight | number or string | The new |
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.
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.
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 |
resizingWidth | number or string | The new |
resizingHeight | number or string | The new |
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.