Search code examples
node.jsbotframeworkmicrosoft-teamsadaptive-cards

How to upload attachment in message extension

I am looking for solution where I could upload an attachment in message extension.

So far, I am able to get the button in the hero card, but how can:

  • I use this button to upload a file?, or
  • Through this button I could open a new Adaptive Card or any card, where I use upload logic?

Attaching image belowenter image description here

Solution

  • As far as i know You can't upload attachment using the actions/buttons functionality of TeamsCards. However you can use Teams TaskModule which allows you to create modal popup window in your Teams application.

    Inside the popup window you can run your own custom HTML/JavaScript code where you can use the <input type="file"> tag to upload your attachment.

    To open a popup window you have to include "msteams":{"type":"task/fetch"} into "data" object of the action object of the card. I used AdaptiveCardDesigner to create an example for you. But i think it's not necessary to use Adaptive Cards to achieve this, this should work with HeroCards too.

    So here's an example:

    {
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Request Task"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Open Task Window",
            "data": {
                "msteams": {
                    "type": "task/fetch"
                },
                "messageId": "12345"
            },
        }
    ]
}

    Next step is to handle this request on the backend and reply with an URL for the TaskModule window.

    Here's an example project from Microsoft.

    Hope this helped.