Upload attachment from messages extension in MS Teams

Question

I have running message extension in MS Teams - which creates the task in the MS Planner.

Next, I am looking for adding the functionality of uploading attachments via message extension.

Below is UI for message extension - build using Adaptive Card (NodeJS).

So, how clicking Upload Document opens the file selector and be able to add an attachment?

Answer 1

To do that you have to use a messaging extension with a web view and point it to your own server. Per default you can not do what you're asking for as far as i know.

https://docs.microsoft.com/en-us/microsoftteams/platform/resources/messaging-extension-v3/create-extensions?tabs=typescript

See here, chapter "Dynamic Input using a web view"

The web view shows a website you host yourself, there you can easily implement a file upload.

Answer 2

As of now there's no such action available in Adaptive card. If you want to do that, you need to create a web page and write custom code for uploading. You can use:

<input type="file" id="attachment" ref={input => this.inputElement = input} style={{ display: "none" }} onChange={e => this.onFileChange(e)} />

Please refer to this sample to know more about Action-based Messaging Extension + Custom web page.

Thanks

Answer 3

There is no functionality of Upload Documents through adaptive cards.

But as suggested triggering web-view , and then have the upload functionality.

Message Extension Code (NodeJS): on Upload Documents

...

return {
   task: {
     type: 'continue',
     value: {
       height: 400,
       width: 400,
       title: 'Task module WebView',
       url: `https://mywebsite.example.com`
     }
   }
};

On click the upload documents , it will be like this:

Front-end Code:

<div>
    <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload />

    <div style="margin-left: -175px" class="centered">
        <h2 style="color: #464775; font-weight: bold; margin-bottom: 10px; margin-top: -20px; margin-left: 30px">Add attachemnt to your task</h2>
    
        <div *ngIf="!buttonDisable" style="margin-left: 70px; margin-bottom: 15px">
            {{ uploadSuccess || 'No file uploaded yet.' }}
            <button color="primary" style="margin-left: 10px" class="upload-btn" (click)="fileUpload.click()">
                <i aria-hidden="true" class="fas fa-paperclip"></i>
            </button>
        </div>
    
        <div style="margin-left: 65px" *ngIf="!buttonDisable">
            <button color="primary" class="btn-cm" style="color: #3fb349; margin-left: 35px" (click)="onSubmit()">Submit Task</button>
        </div>
    
        <div *ngIf="buttonDisable" style="margin-left: 39px; margin-top: 30px">
            <label style="color: #3fb349; margin-left: -1px; margin-top: 23px">{{ message }}</label>
            <button color="primary" class="btn-cm" style="color: #3fb349" (click)="closeWindow()">Close</button>
        </div>
    </div>
</div>

discard the inline css