从 MS Teams 中的消息扩展上传附件答案

【问题标题】：Upload attachment from messages extension in MS Teams从 MS Teams 中的消息扩展上传附件
【发布时间】：2021-09-23 15:20:10
【问题描述】：

我在 MS Teams 中运行消息扩展 - 它在 MS Planner 中创建任务。

接下来，我正在寻找添加通过消息扩展上传附件的功能。

下面是消息扩展的 UI - 使用 Adaptive Card (NodeJS) 构建。

那么，点击Upload Document如何打开文件选择器并能够添加附件？

【问题讨论】：

标签： node.js microsoft-teams adaptive-cards

【解决方案1】：

为此，您必须使用带有 Web 视图的消息传递扩展程序并将其指向您自己的服务器。据我所知，默认情况下你不能做你要求的事情。

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

请参见此处，“使用 Web 视图的动态输入”一章

网络视图显示您自己托管的网站，您可以轻松地实现文件上传。

【讨论】：

【解决方案2】：

到目前为止，自适应卡中还没有这样的操作。如果您想这样做，您需要创建一个网页并编写自定义代码以进行上传。您可以使用：

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

请参阅此sample 以了解有关基于操作的消息传递扩展 + 自定义网页的更多信息。

谢谢

【讨论】：

【解决方案3】：

没有Upload Documents通过自适应卡片的功能。

但是按照建议触发web-view，然后就有上传功能了。

消息扩展代码（NodeJS）：Upload Documents

...

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

点击upload documents，会是这样的：

前端代码：

<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>

丢弃内联css

【讨论】：