How to create a Slack message containing an uploaded image?

Question

I'd like to create a message in the #general channel of my Slackspace from within a PHP script. The message should contain text and an image which was created locally on-the-fly.

I've already created an App, generated an bearer token and have managed to create an text-only message also as an image-upload.

But i didn't know how to create both in one message, as the procedure above creates two messages, one with text and another one with the image.

Solution 1

There are two different approaches on how to post a Slack message with an image.

A. Upload image directly with message

You can upload an image directly to Slack and share it in a channel. Within that request you can also add a comment that will appear as message above the images. This is the easiest approach, however you comment is limited to one string.

API method: files.upload with these arguments:

• channels: ID of one or multiple channel for the image to appear in
• initial_comment: Your message

B. Post message with image block / attachment

Alternatively you can add an image to your normal message either as image block or secondary attachment. This only works with a public URL to your image file, so you first need to upload your image to an image hoster (which can be your Slack workspace) to get the public URL.

In our example we will use Slack as image hoster, but you can use any image hoster (e.g. Imgur) even your own webserver, as long as you get a public URL for your image file.

Step 1 - Upload image to Slack

API method: files.upload with no special arguments, but make sure to get the file ID from the response. Don't include the channels argument or the image will be posted visible into those channel.

Step 2 - Create public URL

Next you have to mark the uploaded file as public. Only then will it be accessible through its public_url property

API method: files.sharedPublicURL with the file ID as argument.

Next you need to construct the direct image link from the link to website / permalink_public property of the file.

The website link you get from permalink_public has the format:

https://slack-files.com/{team_id}-{file_id}-{pub_secret}

The direct link to the image has the format:

https://files.slack.com/files-pri/{team_id}-{file_id}/{filename}?pub_secret={pub_secret}

So you just need to extract the pub_secret from permalink_public and you should be able to construct the direct link to the image. The other parameters you can get from your file object.

Step 3 - Send message

Finally compose your message with the image URL either as Image Block or in a secondary attachment and submit it using a method of your choice.

API method: chat.PostMessage or any other method for sending message incl. incoming webhooks.

Answer to OP

If you need to stick with webhooks as it appears from your comments and have no access to the Slack API I would suggest uploading the image to an image hoster (e.g. Imgur) and then use approach B.

See also

• Slack bot send an image
• Can I upload an image as attachment with Slack API?
• How to use the permalink_public URL of an uploaded image to include it in a message?

Solution 2

After much tinkering I found that while I could not use the API to create a message and upload an image simultaneously, I can first upload an image and then, with the timestamp returned, use update message to add text to the original message with the image upload.

This is the flow:

1- Use files_upload method to upload an image to my channel (using the channel name)

            response = client.files_upload(
            channels=my_channel_name,
            file=image_path,
            initial_comment='My initial comment'
            )

2- Get the response from the files_upload and extract the channel id and timestamp of the message.

channel_id = response['file']['groups'][0]
ts = response['file']['shares']['private'][channel_id][0]['ts']

3- Use chat update to add text or rich content to the message with the uploaded image:

       response = client.chat_update(
            channel=channel_id,
            text="My Message",
            ts=ts,
            blocks=blocks_list
        )

Comments

[T-Regex]

That's great, thanks for you efforts! But, my problem begins with files.upload as it will directly post the image on the target channel. I had expected it is first "hidden" somehow, but it didn't. Or do i need to upload the image in a different channel and later just link it from the target message? Or is there some kind of "upload and hide" i miss?

[T-Regex]

BTW: Solution A works and may be sufficient for what i'm doing now, but i really looking forward to get solution B also working as it gives much more flexibility (e.g. if i need more than one picture). There is one thing it need to figure out to get solution A fully running: the image is posted under my personal username, but should use the name of the App i build in Slack instead...

[Erik Kalkoken]

Solution B will only post the image into a channel if you include the channels property with files.upload

[Erik Kalkoken]

If you want the image to appear as being posted by the app you need to have a bot user and use a bot token for posting it.

[Erik Kalkoken]

@T-Regex If this answer solved your question please consider marking it as solution. TY!

[easd]

This method is great because it requires only 2 API calls, and does not require the uploaded image to be public