Send and receive attachments in the v3 JavaScript SDK

APPLIES TO: SDK v3

A message exchange between user and bot can contain media attachments, such as images, video, audio, and files. The types of attachments that can be sent varies by channel, but these are the basic types:

  • Media and Files: You can send files like images, audio and video by setting contentType to the MIME type of the IAttachment object and then passing a link to the file in contentUrl.
  • Cards: You can send a rich set of visual cards by setting the contentType to the desired card's type and then pass the JSON for the card. If you use one of the rich card builder classes like HeroCard, the attachment is automatically filled in for you. See send a rich card for an example of this.

Add a media attachment

The message object is expected to be an instance of an IMessage and it's most useful to send the user a message as an object when you’d like to include an attachment like an image. Use the session.send() method to send messages in the form of a JSON object.

Example

The following example checks to see if the user has sent an attachment, and if they have, it will echo back any image contained in the attachment. You can test this with the Bot Framework Emulator by sending your bot an image.

// Create your bot with a function to receive messages from the user
var bot = new builder.UniversalBot(connector, function (session) {
    var msg = session.message;
    if (msg.attachments && msg.attachments.length > 0) {
     // Echo back attachment
     var attachment = msg.attachments[0];
        session.send({
            text: "You sent:",
            attachments: [
                {
                    contentType: attachment.contentType,
                    contentUrl: attachment.contentUrl,
                    name: attachment.name
                }
            ]
        });
    } else {
        // Echo back users text
        session.send("You said: %s", session.message.text);
    }
});

Additional resources