# How do I generate thumbnails when using UIkit?

**URL:** <https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970>\
**Category:** React\
**Tags:** javascript, uikit\
**Created:** [June 28, 2022, 5:05pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970 "2022-06-28T17:05:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eueddem\_Kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eueddem_kim/32/2007_2.png) [@Eueddem\_Kim](https://community.sendbird.com/u/Eueddem_Kim)\
**Post date:** [June 28, 2022, 5:05pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/1 "2022-06-28T17:05:07Z")

</div>

Hello,

I’m on implementing chatting using _uikit-react 3.0.0-beta2_ on web, and on paid plan with _Auto-thumbnail generator_ feature. But I couldn’t find enabling thumbnail generation on UI-kit. can you please help?

I found _onBeforeSendFileMessage_ and tried to override like this:

```auto
    const channelProps = {
      channelUrl: sendbirdChannelId,
      onBeforeSendFileMessage: (
        file: File,
        quotedMessage?: SendBird.UserMessage | SendBird.FileMessage
      ): SendBird.FileMessageParams => {
        const params = new sb.FileMessageParams();
        params.file = file;
        params.thumbnailSizes = [{ maxWidth: 200, maxHeight: 200 }];

        return params;
      },
...

```

but it returns error on uploading images:

```auto
{
    "message": null,
    "error": {
        "name": "SendBirdException",
        "code": 800110
    }
}

"SendBirdException: Invalid parameter.
    at new t (http://localhost:56549/application.cae4c36b.js:56940:8697)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:299216)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:295284)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:295646)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:296924)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:293900)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:302663)
    at r.value (http://localhost:56549/application.cae4c36b.js:56940:235345)
    at http://localhost:56549/application.cae4c36b.js:73591:44
    at onFileUpload (http://localhost:56549/application.cae4c36b.js:87510:7)"

```

---

<div class="post-metadata">

**Author:** ![Eueddem\_Kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eueddem_kim/32/2007_2.png) [@Eueddem\_Kim](https://community.sendbird.com/u/Eueddem_Kim)\
**Post date:** [June 28, 2022, 11:10pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/2 "2022-06-28T23:10:14Z")

</div>

Tried this also but no luck:

> ```
> const channelProps = {
> channelUrl: sendbirdChannelId,
> onBeforeSendFileMessage: (
> file: File,
> quotedMessage?: SendBird.UserMessage | SendBird.FileMessage
> ): SendBird.FileMessageParams => {
> 
> // @ts-ignore
> const params = new sb.FileMessageParams();
> params.file = file;
> params.fileName = file.name;
> params.fileSize = file.size;
> params.mimeType = file.type;
> params.thumbnailSizes = [{ maxWidth: 200, maxHeight: 200 }];
> 
> return params;
> },
> 
> ```
> 
> …

---

<div class="post-metadata">

**Author:** ![Yongjun\_Choi](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/yongjun_choi/32/36_2.png) [@Yongjun\_Choi](https://community.sendbird.com/u/Yongjun_Choi)\
**Post date:** [June 30, 2022, 9:06pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/3 "2022-06-30T21:06:58Z")

</div>

@Eueddem_Kim Hello  
Is there an 800110 error even if you try like this?

If you share the file.type and app id, I will check what the requested value is causing the problem.

thank you.

---

<div class="post-metadata">

**Author:** ![Eueddem\_Kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eueddem_kim/32/2007_2.png) [@Eueddem\_Kim](https://community.sendbird.com/u/Eueddem_Kim)\
**Post date:** [June 30, 2022, 9:31pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/4 "2022-06-30T21:31:39Z")

</div>

Hello,

file object I tried upload is:

```auto
{
    lastModified: 1655423546881,
    lastModifiedDate: Thu Jun 16 2022 16:52:26 GMT-0700 (Pacific Daylight Time)
    name: "load_on_login.png",
    size: 51199,
    type: "image/png",
    webkitRelativePath: "",
}

```

or

```auto
{
lastModified: 1655845047574
lastModifiedDate: Tue Jun 21 2022 13:57:27 GMT-0700 (Pacific Daylight Time) {}
name: "view.jpg"
size: 29085
type: "image/jpeg"
webkitRelativePath: ""
}

```

And app id is C6A98DC7-021F-4D16-A9CD-9B99DB18A54C

---

<div class="post-metadata">

**Author:** ![Eueddem\_Kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eueddem_kim/32/2007_2.png) [@Eueddem\_Kim](https://community.sendbird.com/u/Eueddem_Kim)\
**Post date:** [June 30, 2022, 9:34pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/5 "2022-06-30T21:34:49Z")

</div>

weird thing is, it generated thumbnails as expected when I put a breakpoint and injected params.thumbnailSizes during running the script, but returned an error when I tried same thing via onBeforeSendFileMessage callback.

---

<div class="post-metadata">

**Author:** ![Eueddem\_Kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eueddem_kim/32/2007_2.png) [@Eueddem\_Kim](https://community.sendbird.com/u/Eueddem_Kim)\
**Post date:** [June 30, 2022, 11:32pm UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/6 "2022-06-30T23:32:14Z")

</div>

Okay, seems to be solved. I forced to use _Sendbird JavaScript SDK v3.1.20_ instead of _3.1.13_, by specifying this in yarn.json:

```auto
  "resolutions": {
    "react": "^17.0.0",
    "sendbird": "^3.1.20"
  }

```

I suspect the bug is fixed in 3.1.20. I saw in [the release note](https://github.com/sendbird/SendBird-SDK-JavaScript/releases):

> - Fixed File upload error with PUT requests in RN

(Oh, it was released today! xD)

---

<div class="post-metadata">

**Author:** ![Yongjun\_Choi](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/yongjun_choi/32/36_2.png) [@Yongjun\_Choi](https://community.sendbird.com/u/Yongjun_Choi)\
**Post date:** [July 4, 2022, 5:22am UTC](https://community.sendbird.com/t/how-do-i-generate-thumbnails-when-using-uikit/4970/7 "2022-07-04T05:22:41Z")

</div>

My answer is late  
I’m glad it’s been solved.  
Thank you.