Introduction

In my previous Bot framework articles, I have explained about
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.
  1. using System;
  2. using System.Linq;
  3. using System.Net;
  4. using System.Net.Http;
  5. using System.Threading.Tasks;
  6. using System.Web.Http;
  7. using System.Web.Http.Description;
  8. using Microsoft.Bot.Connector;
  9. using Microsoft.Bot.Connector.Utilities;
  10. using Newtonsoft.Json;
  12. namespace AttachImagesAndFiles
  13. {
  14. [BotAuthentication]
  15. public class MessagesController : ApiController
  16. {
  17. /// <summary>
  18. /// POST: api/Messages
  19. /// Receive a message from a user and reply to it
  20. /// </summary>
  21. public async Task<Message> Post([FromBody]Message message)
  22. {
  23. if (message.Type == "Message")
  24. {
  25. // calculate something for us to return
  26. int length = (message.Text ?? string.Empty).Length;
  28. // return our reply to the user
  29. return message.CreateReplyMessage($"You sent {length} characters");
  30. }
  31. else
  32. {
  33. return HandleSystemMessage(message);
  34. }
  35. }
  37. private Message HandleSystemMessage(Message message)
  38. {
  39. if (message.Type == "Ping")
  40. {
  41. Message reply = message.CreateReplyMessage();
  42. reply.Type = "Ping";
  43. return reply;
  44. }
  45. else if (message.Type == "DeleteUserData")
  46. {
  47. // Implement user deletion here
  48. // If we handle user deletion, return a real message
  49. }
  50. else if (message.Type == "BotAddedToConversation")
  51. {
  52. }
  53. else if (message.Type == "BotRemovedFromConversation")
  54. {
  55. }
  56. else if (message.Type == "UserAddedToConversation")
  57. {
  58. }
  59. else if (message.Type == "UserRemovedFromConversation")
  60. {
  61. }
  62. else if (message.Type == "EndOfConversation")
  63. {
  64. }
  66. return null;
  67. }
  68. }
  69. }
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
  1. Attachment attachment = new Attachment();
  2. attachment.ContentType = "image/png";
  3. attachment.ContentUrl = "http://www.c-sharpcorner.com/Images/csharp-corner.png";
  4. message.Attachments.Add(attachment);
Example for sending an Image
  1. using System;
  2. using System.Linq;
  3. using System.Net;
  4. using System.Net.Http;
  5. using System.Threading.Tasks;
  6. using System.Web.Http;
  7. using System.Web.Http.Description;
  8. using Microsoft.Bot.Connector;
  9. using Microsoft.Bot.Connector.Utilities;
  10. using Newtonsoft.Json;
  12. namespace AttachImagesAndFiles
  13. {
  14. [BotAuthentication]
  15. public class MessagesController : ApiController
  16. {
  17. /// <summary>
  18. /// POST: api/Messages
  19. /// Receive a message from a user and reply to it
  20. /// </summary>
  21. public async Task<Message> Post([FromBody]Message message)
  22. {
  23. if (message.Type == "Message")
  24. {
  25. string FoodItem = (message.Text).ToLower();
  26. if(FoodItem=="pizza")
  27. {
  28. Attachment attachment1 = new Attachment();
  29. attachment1.ContentType = "image/png";
  30. attachment1.ContentUrl = "http://www.lapizzatreno.com/upload/pizza_thumb/pizza_image2376.png";
  32. Attachment attachment2 = new Attachment();
  33. attachment2.ContentType = "image/png";
  34. attachment2.ContentUrl = "https://mob.kotipizza.fi/kuvat/tuotteet/pizza-berlusconi-200x200.png";
  36. message.Attachments.Add(attachment1);
  37. message.Attachments.Add(attachment2);
  39. message.Text = "Which pizza you want ";
  40. return message;
  41. }
  42. else if(FoodItem=="burger")
  43. {
  44. Attachment attachment1 = new Attachment();
  45. attachment1.ContentType = "image/jpg";
  46. attachment1.ContentUrl = "http://insidescoopsf.sfgate.com/files/2015/07/burger-200x200.jpg";
  48. Attachment attachment2 = new Attachment();
  49. attachment2.ContentType = "image/jpg";
  50. attachment2.ContentUrl = "http://www.mymarios.com/site/wp-content/uploads/1972/06/burgers-veggie-burger-200x200.jpg";
  52. message.Attachments.Add(attachment1);
  53. message.Attachments.Add(attachment2);
  55. message.Text = "Which Burger you want ";
  56. return message;
  57. }
  58. else
  59. {
  60. message.CreateReplyMessage("Hello, You can order for Pizza and Burger. Just Type \"Pizza\" for Pizza and \"Burger\" for Burger. ");
  61. }
  63. return message;
  64. }
  65. else
  66. {
  67. return HandleSystemMessage(message);
  68. }
  69. }
  71. private Message HandleSystemMessage(Message message)
  72. {
  73. if (message.Type == "Ping")
  74. {
  75. Message reply = message.CreateReplyMessage();
  76. reply.Type = "Ping";
  77. return reply;
  78. }
  79. else if (message.Type == "DeleteUserData")
  80. {
  81. // Implement user deletion here
  82. // If we handle user deletion, return a real message
  83. }
  84. else if (message.Type == "BotAddedToConversation")
  85. {
  86. }
  87. else if (message.Type == "BotRemovedFromConversation")
  88. {
  89. }
  90. else if (message.Type == "UserAddedToConversation")
  91. {
  92. }
  93. else if (message.Type == "UserRemovedFromConversation")
  94. {
  95. }
  96. else if (message.Type == "EndOfConversation")
  97. {
  98. }
  100. return null;
  101. }
  102. }
  103. }
Output

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

Example for sending Files
  1. Attachment attachment1 = new Attachment();
  2. attachment1.ContentType = "application/pdf";
  3. attachment1.ContentUrl = "http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf";
  5. message.Attachments.Add(attachment1);
  7. message.Text = "Angular JS";
  8. return message;
Output