Generate thumbnails of a file message

When sending image or video files, you can create thumbnails of the multimedia files and render them into your UI. You can specify up to three different sizes for thumbnail images when sending a message both with a single file and with multiple files.

Note: Supported file types are image/* and video/*. The Chat SDK doesn't support creating thumbnails when sending a file message via URL.

The sendFileMessage() method requires passing a FileMessageCreateParams object as an argument to a parameter containing an array of items that each specify the maximum width and height of a thumbnail image. The callback function subsequently returns a list of Thumbnail items that each contain the URL of the generated thumbnail image file.

A thumbnail image is generated to fit within the bounds of the provided maxWidth and maxHeight. If the size of the original image is smaller than the specified dimensions, the original image will have the width and height of the specified dimensions. The URL of the thumbnail returns the location of the generated thumbnail file within the Sendbird server.

JavaScriptTypeScript

const params = {
    file: FILE,
    fileName: FILE_NAME,
    fileSize: FILE_SIZE,
    mimeType: MIME_TYPE,
    thumbnailSizes: [{maxWidth: 100, maxHeight: 100}, {maxWidth: 200, maxHeight: 200}]; // Add the maximum sizes of thumbnail images. 
                                                                                        // Up to three thumbnail sizes are allowed.
};
channel.sendFileMessage(params)
    .onSucceeded((message: FileMessage) => {
        const thumbnailFirst = fileMessage.thumbnails[0];
        const thumbnailSecond = fileMessage.thumbnails[1];
        
        const maxHeightFirst = thumbnailFirst.maxHeight;                // 100
        const maxHeightSecond = thumbnailSecond.maxHeight;        // 200
            
        const urlFirst = thumbnailFirst.url;                // The URL of the first thumbnail file.
        const urlSecond = thumbnailSecond.url;        // The URL of the second thumbnail file.
    });

The same applies to sending a message with multiple files. First, create a MultipleFilesMessageCreateParams object with an array of UploadableFileInfo. Each UploadableFileInfo has a property ThumbnailSizes property. The property can hold up to three ThumbnailSize objects that specify the maximum values of width and height of each thumbnail image. Then call sendMultipleFilesMessage() with the params.

JavaScriptTypeScript

const params = {
fileInfoList: [
    {
    file: fileOne,
    fileSize: fileOne.size,
    fileName: fileOne.name,
    mimeType: fileOne.type,
    // Add the maximum sizes of thumbnail images.
    // Up to three thumbnail sizes are allowed.
    thumbnailSizes: [
        {maxWidth: 100, maxHeight: 100},
        {maxWidth: 200, maxHeight: 200}
    ],
    },
    {
    file: fileTwo,
    fileSize: fileTwo.size,
    fileName: fileTwo.name,
    mimeType: fileTwo.type,
    thumbnailSizes: [
        {maxWidth: 100, maxHeight: 100},
        {maxWidth: 200, maxHeight: 200}
    ],
    },
]
};

Sample app