Chat / JavaScript
Chat JavaScript v4
Chat JavaScript
Version 4

Generate thumbnails of a file message

Copy link

When sending an image file, you can determine whether to create thumbnails of the image to fetch and render into your UI. You can specify up to three different sizes for thumbnail images.

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.

const params: FileMessageCreateParams = {
    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 images are allowed.
    .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.

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.