How to Automatically Post Message with Image in a Teams Channel

Introduction:

How does one migrate Rich Text (with image) content in MS Teams channel from other applications? Rich Text (with image) content migration from other applications to MS Teams is not straightforward and poses some technical challenges. Usually, we place an image URL value in the src property of img tag programmatically in the HTML body, but that will not work here to show an image with the message.

Solution

To post Rich Text message in MS Teams channel, you have to first perform a REST call (https://us-prod.asyncgw.teams.microsoft.com/v1/objects/it may change depending on the location) to get the image blob ID. Once it responds to the ID, get the image blob ID and upload the image using this blob ID. REST call is https://us-prod.asyncgw.teams.microsoft.com/v1/objects/” + ImageBlobId + “/content/imgpsh”. After uploading the image, you can build the HTML body for the image, like this-

<span contenteditable='false'><img src='https://us-api.asm.skype.com/v1/objects/" + imageBlobId + "/views/imgo' style='vertical-align:bottom;width:" + imgWidth + "px;height:" + imgHeight + "px;' width='" + imgWidth + "' id='" + imageBlobId + "' target-src='https://us-api.asm.skype.com/v1/objects/" + imageBlobId + "/views/imgo' itemscope='' itemtype='http://schema.skype.com/AMSImage'></span>

Here are the steps to upload the image programmatically and show the image in the channel conversation.

Step 1

Get access token- This is the first step to getting the access token.

Step 2

Request a REST call to get the blob ID for the image. Here is the rest call details below-

public static string GetImageBlobObjectID(string strRegistrationtoken, string ChannelID, string imageName)
        {
            string ImageBlobId = "";
            string strURL = "https://us-prod.asyncgw.teams.microsoft.com/v1/objects/";
// may need to change for other location....
            var httpWebRequest = (HttpWebRequest)WebRequest.Create(strURL);
            httpWebRequest.ContentType = "application/json";
            httpWebRequest.Headers.Add("Authorization:skype_token " + SkypeToken);
            httpWebRequest.Headers.Add("x-ms-client-version", "1415/1.0.0.2020050625");

            httpWebRequest.Method = "POST";
            using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
            {
                string json = "";
                json = "{\"type\":\"pish/image\",\"permissions\":{\"" + ChannelId + "\":[\"read\"]},\"filename\":\"" + imageName + "\"}";

                streamWriter.Write(json);
                streamWriter.Flush();
                streamWriter.Close();

                    var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
                    using (WebResponse resp = httpWebRequest.GetResponse())
                    {
                        Encoding encode = Encoding.GetEncoding("utf-8");
                        StreamReader reader = new StreamReader(resp.GetResponseStream(), encode);
                        json = reader.ReadToEnd();
                        json = json.Replace("throw 'allowIllegalResourceCall is false.';", "");
                        var ImageBlobIdObject = JsonUtility.Deserialize<ImageBlobIdEntity>(json);
                        ImageBlobId = ImageBlobIdObject.id;
                    }
                
            }

            return ImageBlobId;
        }

Step 3

Upload the image using that blob ID. Here are the REST call details-

public static bool UploadImageInTeamsBlob(string strRegistrationtoken, Byte[] DowloadedImageBytes, string ImageBlobId)
        {
            bool Result = false;

            HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create("https://us-prod.asyncgw.teams.microsoft.com/v1/objects/" + ImageBlobId + "/content/imgpsh");

            request.Headers.Add("Authorization", "skype_token " + SkypeToken);
            request.ContentType = "application/octet-stream";
            request.Headers.Add("Accept-Encoding", "gzip, deflate, br");


            request.Accept = "*/*";

            request.Headers.Add("x-ms-client-version", "1415/1.0.0.2020050625");

            request.Method = "PUT";

            using (var streamWriter = new BinaryWriter(request.GetRequestStream()))
            {
                streamWriter.Write(DowloadedImageBytes);
                streamWriter.Flush();
                streamWriter.Close();
            }
            using (HttpWebResponse httpChannelWebReponse = (HttpWebResponse)request.GetResponse())
            {
                Encoding encode = Encoding.GetEncoding("utf-8");
                StreamReader reader = new StreamReader(httpChannelWebReponse.GetResponseStream(), encode);

                string Response = reader.ReadToEnd();
                Result = true;
            }

            return Result;
        }

Step 4

Modify the HTML body, build the image tag like this below-

<span contenteditable='false'><img src='https://us-api.asm.skype.com/v1/objects/" + imageBlobId + "/views/imgo' style='vertical-align:bottom;width:" + imgWidth + "px;height:" + imgHeight + "px;' width='" + imgWidth + "' id='" + imageBlobId + "' target-src='https://us-api.asm.skype.com/v1/objects/" + imageBlobId + "/views/imgo' itemscope='' itemtype='http://schema.skype.com/AMSImage'></span>

Step 5

Now you can post the Rich Text message with image, here is a sample-

var httpWebRequest = (HttpWebRequest)WebRequest.Create(String.Format("https://apac.ng.msg.teams.microsoft.com/v1/users/ME/conversations/{0};messageid={1}/messages", HttpUtility.UrlEncode(ChannelId), RootPostMsgId));
                httpWebRequest.ContentType = "application/json";
                httpWebRequest.Headers.Add("RegistrationToken:" + strRegistrationtoken);
                httpWebRequest.Method = "POST";

  using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
                {
                    string json = "";
                        
                            json = "{\"content\":\"" + Postmsg + "\",\"messagetype\":\"RichText/Html\",\"contenttype\":\"text\",\"amsreferences\":[" + strImageBlobIdArray + "],\"clientmessageid\":\"" + clientmessageid + "\"," +
                                      "\"imdisplayname\":\"svc_AZ_shpmigration1\"," +
                                      "\"properties\":{\"files\":[" + attachmentinfo + "],"
                                      + "\"importance\":\"\"}}";
                       
                        

                    

                    streamWriter.Write(json);
                    streamWriter.Flush();
                    streamWriter.Close();
                }

var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
                    using (WebResponse resp = httpWebRequest.GetResponse())
                    {
                        ReplyMessageid = resp.Headers["Location"];
                        ReplyMessageid = ReplyMessageid.Substring(ReplyMessageid.LastIndexOf("/") + 1);
                        return ReplyMessageid;
                        
                    }

Conclusion

This artifact can be used while migrating Rich Text content into Teams channel from other applications, whether you’re interacting with a BOT, posting a message from a workflow, reposting messages from any other chat rooms to Teams channels, etc. This simple artifact will come in handy, and you can build on it easily. We hope this blog helped you learn how to easily migrate Rich Text (with image) content in MS Teams channels.