How do I generate thumbnails when using UIkit?

Sendbird Chat UIKit React
,
1

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:

    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:

{
    "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)"
2

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;
  },

…

3

@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.

4

Hello,

file object I tried upload is:

{
    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

{
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

5

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.

6

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:

  "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:

  • Fixed File upload error with PUT requests in RN

(Oh, it was released today! xD)

1 Like
7

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