Access an unAuthorize chat image using the Javascript SDK

Sendbird Chat UIKit React
1

I recently had to restyle my copy of the Chat UIKIT. The message bubbles needed to be restyled and so I used the renderCustomMessage prop on the Channel component in order to restyle the messages. As it stands when I get an image type message, the file url is coming with out the auth key attached too it. This causes the images to not show in the chat.

Here is a sample of my data. The file url does not have the auth key:

Screen Shot 2021-12-07 at 9.53.51 AM
Screen Shot 2021-12-07 at 9.53.51 AM1372×830 113 KB

accessing the file url in there will send me to a blank page saying I am not authorized.

How can I get sendbird to send file urls that have the auth key attached to them?
I am wondering if there is someplace in the Dashboard where I can turn this on?
I do not see any docs that specifies where I can do this. Please help.

2

Hi @arnold and welcome to the Sendbird community!!

The sample of data that you shared doesn’t seem to be like a file message. Can you please share more details on how this looks like from your code and more specifically the renderCustomMessage prop? Please also share your SDK and UIKit versions as well as there may be some differences from older versions.

Regarding your main question, here is a working example on how to get the file URL with the auth key included:

const CustomMessage = (message) => {
  if (message.messageType === 'file') {
    console.log("Message object", message)
    console.log("URL", message.url)
  }
  return () => (
    <div>
      <p>{message.message}</p>
      <small>{message.type}</small>
      {message.url && <img src={message.url} width={80} alt=""/>}
    </div>
  )
}

// ...

<Channel
  renderCustomMessage={CustomMessage}
/>