Multiple In-Line Images to Microsoft Teams Channel Message - Array to JSON Body Payload (Microsoft Graph API)

How To
1

Hi,

I’m seeking to post multiple images in-line to a Microsoft Teams Channel in a single message (NOT a message per image). I have this working with a single image but figuring out how to handle an array of N number of images has me perplexed.

The standard Teams modules in Make don’t yet have this functionality for in-inline images (and other useful things - features requested) so I am having to do this via the Microsoft Teams “Make an API Call” endpoint.

API Documentation here:

The key part regarding in-line photos is hosted contents and a unique @microsoft.graph.temporaryId" per image.

"hostedContents":[
    {
      **"@microsoft.graph.temporaryId": "1",**
      "contentBytes": "samplebase64data",
        "contentType": "image/png"
    }]

… looking for suggestions on how to take an array like this:

[
{
“array”: [
{
“data”: “IMTBuffer(142502, binary, 8230f41cab545fff1b0ff77398fd17f320413c72): ffd8ffe000104a46494600010100000100010000ffdb00430003020203020203030203030303030407050404040409060705070a090b0b0a090a0a0c0d110e0c0c100c0a0a0e140f1011121313130b0e141614121611121312ffdb004301030303040404”,
“fileName”: “file.jpeg”,
“IMTINDEX”: 1,
“IMTLENGTH”: 3
},
{
“data”: “IMTBuffer(51234, binary, 0bb74b89e6f0a86a50eb84631f9adee43c2b592c): ffd8ffe000104a46494600010100000100010000ffdb0084000302020708070608080606060605060606060606080806060506060808060606060606080606050606060606060a0505070809090906060b0d0a080d060809080103040406050608060608”,
“fileName”: “file.jpeg”,
“IMTINDEX”: 2,
“IMTLENGTH”: 3
},
{
“data”: “IMTBuffer(54773, binary, a5b7b03a1999f038db768cf4bc43ce1a89c16813): ffd8ffe000104a46494600010100000100010000ffdb00430003020203020203030203030303030407050404040409060705070a090b0b0a090a0a0c0d110e0c0c100c0a0a0e140f1011121313130b0e141614121611121312ffdb004301030303040404”,
“fileName”: “file.jpeg”,
“IMTINDEX”: 3,
“IMTLENGTH”: 3
}
],
“IMTAGGLENGTH”: 3
}
]

into body input for the Microsoft Teams module that looks like this…

"hostedContents":[
    {
      "@microsoft.graph.temporaryId": "1",
      "contentBytes": "base64(ffd8ffe000104a46494600010100000100010000ffdb00430003020203020203030203030303030407050404040409060705070a090b0b0a090a0a0c0d110e0c0c100c0a0a0e140f1011121313130b0e141614121611121312ffdb004301030303040404)",
        "contentType": "image/jpg"
    },
    {
      "@microsoft.graph.temporaryId": "2",
      "contentBytes": "base64(ffd8ffe000104a46494600010100000100010000ffdb0084000302020708070608080606060605060606060606080806060506060808060606060606080606050606060606060a0505070809090906060b0d0a080d060809080103040406050608060608)",
        "contentType": "image/jpg"
    },

    {
      "@microsoft.graph.temporaryId": "3",
      "contentBytes": "base64(ffd8ffe000104a46494600010100000100010000ffdb00430003020203020203030203030303030407050404040409060705070a090b0b0a090a0a0c0d110e0c0c100c0a0a0e140f1011121313130b0e141614121611121312ffdb004301030303040404)",
        "contentType": "image/jpg"
    }

]

2

You need to use an iterator to separate out the array. Then use a text aggreagtor to combine them back in the format you need.

Hope this helps!

2 Likes
4

Forgot about the text aggregator. Was having a maddening experience trying to use a regularly aggregator.

Thank you!

1 Like
5

I ended up banging my head for quite a while before realizing there is one quick and one serious complexity to this.

Screenshot 2024-09-10 at 20.11.46
Screenshot 2024-09-10 at 20.11.462098×788 110 KB

My text aggregator for the hostContents
{
“@microsoft.graph.temporaryId”: “{{69.__IMTINDEX__}}”,
“contentBytes”: “{{base64(70.data)}}”,
“contentType”: “image/png”
}

sample output

{
“@microsoft.graph.temporaryId”: “1”,
“contentBytes”: “bufferedbase64content”,
“contentType”: “image/png”
},{
“@microsoft.graph.temporaryId”: “2”,
“contentBytes”: “bufferedbase64content”,
“contentType”: “image/png”
},{
“@microsoft.graph.temporaryId”: “3”,
“contentBytes”: “bufferedbase64content”
}

The Quirk
From Microsoft Send chatMessage in a channel or a chat - Microsoft Graph v1.0 | Microsoft Learn
Note: The temporaryId in the hostedContents collection is a random ID but must be the same across the body and hostedContents elements. (Notice the temporaryId set to 1 and the reference in the body as ../hostedContents/1/$value .)

In my case I created a second text aggregator for this followed by a set variable and then collected that variable. This is a bit brute force as I’m just forcing the images in at this point without any fanciful HTML formatting (more on that below)

<img src="…/hostedContents/{{69.__IMTINDEX__}}/$value">

sample output

<img src="…/hostedContents/1/$value">,
<img src="…/hostedContents/2/$value">,
<img src="…/hostedContents/3/$value">

The Complexity
You’re now having to write HTML to get this to work properly in the message. A lot of insanity with backslashes to embed HTML within JSON. I’m not even about to wrack my brain further by trying to figure out how to get fancy with HTML formatting on these if you wanted a grid layout or something fancy.

6

You could just add that random temporary id before your iterator amd map it to each of the bundles in the text aggreagtor. That way this id will be the same across all your body and hosted content.

7

Can you elaborate on this. I’m not sure I fully understand.

8

The generated variable was placed before the iterator so it can mapped into each bundle and it will be constant. Instead of the variable being generated with the iterator where it will be different from each of the other bundles.

image
image1347×640 85.6 KB

image
image843×893 66.2 KB

So if you wish to have a constant temporaryid you do not need a second text aggregator.

1 Like
9

Thank you. The visual aid made this very clear.