Attach Images and Files With Reply Message In Bot Framework

Introduction

In my previous Bot framework articles, I have explained about

• How can we install Bot Framework and Create a Simple Bot Framework Application
• Real Time Bot Application
• An Interactive Bot Application With LUIS Using Microsoft Bot Framework
  

Now in this article, I will explain how we can attach images and files with Bot framework's reply message.

Many messaging channels possess an ability to attach rich objects like images, media files and other files. In the Bot Connector, we map our attachment data structure to media attachments and rich cards on each channel.    

Let's start, step by step.

 

First of all open, Visual Studio and create a Bot Application. Follow the steps to create a Bot Application.

• Go to File > New > Project (CTRL + SHIFT +N). 
  
  
• Now one dialog box will open. Select Visual C# Project and you will find an option, Bot Application. Choose this and give the name of the project.
  
  
  
  
• After creating the project, you will get some files in Solution Explorer, as you can see in the figure shown below:
  
  

Now open MessagesController, which is located under controllers folder. In this, you will get following code, by default. 

using System;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Connector.Utilities;
using Newtonsoft.Json;

namespace AttachImagesAndFiles
{
    [BotAuthentication]
    public class MessagesController : ApiController
    {
        /// <summary>
        /// POST: api/Messages
        /// Receive a message from a user and reply to it
        /// </summary>
        public async Task<Message> Post([FromBody]Message message)
        {
            if (message.Type == "Message")
            {
                // calculate something for us to return
                int length = (message.Text ?? string.Empty).Length;

                // return our reply to the user
                return message.CreateReplyMessage($"You sent {length} characters");
            }
            else
            {
                return HandleSystemMessage(message);
            }
        }

        private Message HandleSystemMessage(Message message)
        {
            if (message.Type == "Ping")
            {
                Message reply = message.CreateReplyMessage();
                reply.Type = "Ping";
                return reply;
            }
            else if (message.Type == "DeleteUserData")
            {
                // Implement user deletion here
                // If we handle user deletion, return a real message
            }
            else if (message.Type == "BotAddedToConversation")
            {
            }
            else if (message.Type == "BotRemovedFromConversation")
            {
            }
            else if (message.Type == "UserAddedToConversation")
            {
            }
            else if (message.Type == "UserRemovedFromConversation")
            {
            }
            else if (message.Type == "EndOfConversation")
            {
            }

            return null;
        }
    }
}

If you want to attach a simple image or file with reply message, then you have to add a simple attachment data structure with a link to the content which is depicted below:

• ContentType- In this property you can set Content Type / MIME Type, which describes which type of content you are sending.
• ContentUrl- This property contains actual file link. 

Sample Code for sending Files and Images

Attachment attachment = new Attachment();
attachment.ContentType = "image/png";
attachment.ContentUrl = "http://www.c-sharpcorner.com/Images/csharp-corner.png";
message.Attachments.Add(attachment);

Example for sending an Image

using System;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Connector.Utilities;
using Newtonsoft.Json;

namespace AttachImagesAndFiles
{
    [BotAuthentication]
    public class MessagesController : ApiController
    {
        /// <summary>
        /// POST: api/Messages
        /// Receive a message from a user and reply to it
        /// </summary>
        public async Task<Message> Post([FromBody]Message message)
        {
            if (message.Type == "Message")
            {
                string FoodItem = (message.Text).ToLower();
                if(FoodItem=="pizza")
                {
                    Attachment attachment1 = new Attachment();
                    attachment1.ContentType = "image/png";
                    attachment1.ContentUrl = "http://www.lapizzatreno.com/upload/pizza_thumb/pizza_image2376.png";

                    Attachment attachment2 = new Attachment();
                    attachment2.ContentType = "image/png";
                    attachment2.ContentUrl = "https://mob.kotipizza.fi/kuvat/tuotteet/pizza-berlusconi-200x200.png";

                    message.Attachments.Add(attachment1);
                    message.Attachments.Add(attachment2);

                    message.Text = "Which pizza you want ";
                    return message;
                }
                else if(FoodItem=="burger")
                {
                    Attachment attachment1 = new Attachment();
                    attachment1.ContentType = "image/jpg";
                    attachment1.ContentUrl = "http://insidescoopsf.sfgate.com/files/2015/07/burger-200x200.jpg";

                    Attachment attachment2 = new Attachment();
                    attachment2.ContentType = "image/jpg";
                    attachment2.ContentUrl = "http://www.mymarios.com/site/wp-content/uploads/1972/06/burgers-veggie-burger-200x200.jpg";

                    message.Attachments.Add(attachment1);
                    message.Attachments.Add(attachment2);

                    message.Text = "Which Burger you want ";
                    return message;
                }
                else
                {
                    message.CreateReplyMessage("Hello, You can order for Pizza and Burger. Just Type \"Pizza\" for Pizza and \"Burger\" for Burger. ");
                }

                return message;
            }
            else
            {
                return HandleSystemMessage(message);
            }
        }

        private Message HandleSystemMessage(Message message)
        {
            if (message.Type == "Ping")
            {
                Message reply = message.CreateReplyMessage();
                reply.Type = "Ping";
                return reply;
            }
            else if (message.Type == "DeleteUserData")
            {
                // Implement user deletion here
                // If we handle user deletion, return a real message
            }
            else if (message.Type == "BotAddedToConversation")
            {
            }
            else if (message.Type == "BotRemovedFromConversation")
            {
            }
            else if (message.Type == "UserAddedToConversation")
            {
            }
            else if (message.Type == "UserRemovedFromConversation")
            {
            }
            else if (message.Type == "EndOfConversation")
            {
            }

            return null;
        }
    }
}

Output 

Run this program in Bot emulator and you will get the output, as shown below:

 

 

Example for sending Files

Attachment attachment1 = new Attachment();
attachment1.ContentType = "application/pdf";
attachment1.ContentUrl = "http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf";

message.Attachments.Add(attachment1);

message.Text = "Angular JS";
return message;

Output