Search code examples
node.jsslackslack-api

Image link urls are showing two copies of every image using slack rtm API

Here's the code we're using, which worked totally fine until about a week ago:

rtm.sendMessage("https://cdn3.vectorstock.com/i/1000x1000/28/72/set-of-art-calligraphy-letter-i-with-flourish-of-vector-13972872.jpg", currentchannel)

Until about a week ago, that type of image would unfurl and show just one copy of the image. Now we're getting two copies of the image unfurling. The second copy of the unfurled image is slightly indented, with a note that says (edited), even though no editing has taken place. Any ideas?

Additional note: This same issue happens when using chat.postMessage instead of the rtm api.

Image unfurls, then an exact same copy of the image unfurls below, with a tag that says "edited", even though no editing has taken place

Solution

  • The Issue:

    Two major things:

    1. You should use chat.postMessage() instead of rtm.sendMessage(). You were right to try that, but you need to stick with it if you want to fix this - from the docs:

      • RTM: Formatting Messages: The RTM API only supports posting simple messages formatted using our default message formatting mode. It does not support attachments or other message formatting modes.

      • node-slack-sdk/rtm-api: simple means that it cannot send messages that include attachments or blocks, but it can include text, mentions, and links which unfurl.

    2. You are sending your message as plain-text, not as an attachment, image block, or other type of rich media message.
      • This essentially has the same effect as if a user simply pastes an image URL into a slack channel. In most cases, slack will "unfurl" the image.
      • I'm not 100% sure it shows up as "edited" after unfurling, but my guess would be that Slack considers "unfurling" to be an edit to your original message, and they are trying to indicate that they (as in Slack) edited the message to unfurl it. The double image could be a temporary glitch, or it could be a caching issue, where Slack is serving a cached version, and then updating with a fresh one.

    The Correct Solution:

    To fix both these issues, you want will want to send your message with chat.postMessage(), or an incoming webhook, and include the image as either an attachment or in an image block (recommended). The docs cover this in great detail, and you can even play around with their block kit builder tool, which lets you preview how messages will show based on the JSON payload you will be sending via the API (or message builder for the legacy format).

    To get you most of the way there, here is a preview of the minimum JSON payload to send your image. And, in code:

    chat.postMessage({
    "blocks": [
        {
            "type": "image",
            "image_url": "https://cdn3.vectorstock.com/i/1000x1000/28/72/set-of-art-calligraphy-letter-i-with-flourish-of-vector-13972872.jpg",
            "alt_text": "Calligraphy, Letter I"
        }
    ]
}, currentchannel);

    screenshot