Teams: Invoke-Webrequest sending base64 string (png) to Teams

Question

I am trying to send a base64-string which is a png to our Teams-channel which have an "Incoming Webhook" setup.

The message is sent to the channel but no image is displayed and when I searched for this it seems that I can't send an image or any other type of attachment as a base64-string to Teams?

Extremely new to json and consuming / using rest api in general.

I have no idea how to instruct the body that the string is a base64-string and the expected output should be a png-file.

Tried this:

$webhook = 'URLtoTeamsWebhook'
$base64 = "longBase64string"

$Body = @{
     "text" = "Hello World! from PowerShell"
     "imageData" = "$base64"
}

$params = @{
      Headers = @{'accept'='application/json'}
      Body = $Body | convertto-json
      Method = 'Post'
      URI = $webhook 
}

Invoke-RestMethod @params

But it didn't work, also tried the code below with changes to the body:

$Body = @{
  "type" = "string",
  "contentEncoding" = "$base64",
  "contentMediaType" = "image/png"
}

and it also didn't work.

"Didn't work" = Posting to Teams but not displaying the image at all.

Update:

Was able to figure this out, sort-of but would still appreciate a reply;

https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/cards/cards-reference

I guess you can "only" use their cards to send in data through their "Incoming webhook" and the card I would like to use is the "Hero Card" since the data is an alarm with a image of a graph, HOWEVER it is not supported when using a "connector" :(

I found this website;

https://github.com/grafana/grafana/issues/13121

and I've used the example there however that require me to have to send the picture (which is in a base64-format) to S3 in order for users to be able to view a larger picture.

score 9 · Answer 1 · answered Jul 15 '19 at 06:48

Webhook support Office 365 connector card. Please send following message card JSON and let us know if you facing any issues.

 {
    "@type": "MessageCard",
    "text": "Here are test images",
    "sections": [
        {
            "images": [
                {
                    "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMeSURBVDhPLVJbTBRXAL135s7Ozs7Ozi6z7AK7sCobCa2rmBabAEGNBlgjCr6t1qS26RIbH0lLH3y1fLQJsdVojPGjtjGGhKgfJIZoIhhEEg2+wagsYmlE2Ar7mNkddmbunel+9CTn4+Tk/Jxz4F8/diKatiDE2MKE0JARmrcNdXfVrVuj6xoFTVWRWRvF2YCkJftLms+vjgFs+gxlzD+KPDxEiIaQIiZGmJRtOXTmyMG9O1ox1igAiaZiBhbcYiwfW/fzWPHHQNabxFR/WTxj+ihRdPAOBtEWwHp5Q+uFX7sOf7odY4xoQChap1lJ5CHDbqz/c+x9KPRuYTx07+ayGVMstXu89IFNdQQTy7IcxcsHnryocRBGcBc0RIydgQGUfySsOlD1E55KX6mVW+O9Wc1y8bbZqZdOl5t6rxgZFWs6TEghauKuFKhQc3mMTQYCn5Y+6W3vkDrAkxmgqB1n7+96vCLgZpHHf6731pvnz+gju6PeIoEvLZscuNS6tcXJmj6Jd7tYJ8k2lf8wmgswb+ZpB2dquaWiyqex4t09w21hc+AfJqnocG+0feb1dHIh9W8mKxMcrKhS0klRcLidRXhP10RkA4hPM/KSwYnA0Nnk4lZ3Orw4GqyO9F0fgf3Xh7/4vKPzxFfffHd8Lv4uWB0A/8Ms8M7kwvr7dpDJsPMpDTmAovh5JjE83LL+gxuDY/D3WCyyY3/saNfmVR+eunh6cjwuulyCSzSWTJVnNcR46Zz/ZmELyEzPYoYrVAsMAvIG5DgqEPQs3u7747fvJ1Lp7dG2moY1Ly8PPu0dwYCyZbO6RsZl1mpHPlveWFmOSB5YFsXbodNuaTIFKEQcnrl7g91f75OqVgdcFdGeL8M10tz41NDAKzSX5LLGtb/pxE5Xoz1tVIcRbVBqDhRygptKEZjVjEUdqsT65dzJzzq/hYWH1kfCK4WmtqqMQXOJ2aCS6n2oDbWVHhXe4nAl5ija0KzCl6ONG2zQMiB69WJK8PobW1oitXWNH9U279tV6uQldtYbCsoJ1Un0B/P48Ccla835q6DERABl1f8A6bloNT9MI68AAAAASUVORK5CYII="
                }
            ]
        }
    ]
}

Is there any limitation on image size? I tried sending a medium size image by using a Task Module Form but it's not received in teams whereas when I send a small image it works. — Manish Chitre, Apr 30 '20 at 14:11
The image size really matters when you want to use base64 encoded images. I ran into the same problem and was able to fix it, by using a really really small image. :-D — lars, Sep 27 '22 at 15:04
This does not work for me. @lars, what is 'really really small'? I'm down to 20x15 pixels, which also means the message is only 714 bytes. The webhook is on office.com, sending the text works, it's just that the image stays blank. — Jann Poppinga, Oct 21 '22 at 05:45
I have the same size. Between 400 and 760 bytes. This should therefore not be the problem. I added my solution as an answer and hope that it allows you to get your setup working. :) — lars, Oct 25 '22 at 09:14

score 1 · Answer 2 · answered Oct 25 '22 at 09:13

A follow up to the answer of Trinetra-MSFT. In order to read the image data and make it work in Python, please use the following.

 # Read images as base64 encoded string to allow MessageCards to use them
 activity_image_success = base64.b64encode(open(os.path.join(dirname, "images/success.png"),"rb").read()).decode('utf-8')
 activity_image_error = base64.b64encode(open(os.path.join(dirname, "images/error.png"),"rb").read()).decode('utf-8')

In the message card add the data like this

'activityImage': f"data:image/png;base64,{activity_image_error}",

Encode the response

# Send POST request to MS Teams connector 
http.request('POST', hook_url, 
    headers={'Content-Type': 'application/json'},
    body=json.dumps(data).encode('utf-8'))

Teams: Invoke-Webrequest sending base64 string (png) to Teams

2 Answers2

Linked