Upload file in Teams using bot

The bot uses Teams API to send and receive files with users in the personal chats. The files shared in Teams can appear as cards and allow rich in-app viewing. The bot also helps in implementing features like expense reporting, image recognition, file archival, and e-signatures that involve editing of file content.

Key features of uploading file in Teams using bot:

Upload files to Teams using a bot.
Receive a file sent to bot as an attachment.
Fetch inline images sent in message.

This step-by-step guide helps you to upload file in Teams using bot. You'll see the following output:

Screenshot showing the final output

Prerequisites

21 minutes remaining

Ensure you install the following tools and set up your development environment:

	Install	For using...
Required
	Microsoft Teams	Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call and all in one place.
	Visual Studio 2022 version 17.3 Install one of the following two workloads: • ASP.NET and web development • .NET Core cross-platform development	You can install the enterprise version in Visual Studio 2022, and install the workloads.
	.NET Core SDK version 3.1	Customized bindings for local debugging and Azure Functions app deployments. If you haven't installed the .NET 3.1 (or later) SDK globally, the portable version can be installed.
	ngrok	Teams app features (conversational bots, message extensions, and incoming webhooks) require inbound connections. A tunnel connects your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).

Note

After downloading ngrok, sign up and install authtoken.

Set up local environment

20 minutes remaining

Open Microsoft-Teams-Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.

Create and register your bot

19 minutes remaining

The following steps help you to create and register your bot in Azure portal:

Create Azure Bot resource to register bot with Azure Bot Service.
Create client secret to enable SSO authentication of the bot.
Add Teams channel to deploy the bot.
Create a tunnel to your web server's endpoints by using ngrok.
Add messaging endpoint to the ngrok tunnel you created.

To create Azure Bot resource

Go to the Azure portal.
Select Create a resource.
In the search box, enter Azure bot.
Select Enter.
Select Azure Bot.
Select Create.
Enter required bot handle name in Bot handle.
From the Subscription dropdown list, select your subscription.
From the Resource group dropdown list, select your existing resource group.

To create a new resource group, select Create new > enter resource name > select OK. Select the required location from New resource group location dropdown list.
In the Microsoft App ID section, by default Create new Microsoft App ID is selected.

You can also select Use existing app registration and enter existing App ID, App tenant ID, and MSI resource ID.

Note

You can't create more than one bot with the same Microsoft App ID.
Select Type of App as Multi Tenant.
Select Review + create.
If the validation passes, select Create.

It takes a few moments for your bot service to be provisioned.
Select Go to resource.

Your Azure bot is created.

To create client secret

Perform the following steps if you've created a new Microsoft App ID:

In the left panel, select Configuration.

Tip

Save the Microsoft App ID or Client ID for future reference.
Next to Microsoft App ID, select Manage.
In the Client secrets section, select New client secret.

The Add a client secret window appears.
Enter Description.
Select Add.
In the Value column, select Copy to clipboard.

Tip

Save the Client secrets value or app password for future reference.

To add the Teams channel

Select Home.
Select your bot from Recent resources.
Select Channels in the left pane and select Microsoft Teams .
Select the checkbox to accept the Terms of Service.
Select Agree.
Select Apply.

To create tunnel for local web server

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

To add messaging endpoint

From ngrok, copy the HTTPS URL.

Note

The HTTPS URL in your ngrok is your fully qualified domain name. The WebAppDomain is a fully qualified domain name that doesn't include https:// in it.
In Settings for the Azure bot that you created, select Configuration.
In Messaging endpoint, use the HTTPS URL available from ngrok and at the end of the URL add /api/messages.
Select Apply.

You have successfully set up a bot in Azure Bot Service.

Update the Azure AD app registration

14 minutes remaining

Go to the Azure portal.
Select Azure Active Directory.
From the left pane, select App Registrations.
Select your bot.
Select Expose an API.
Select Set.
Set the Application ID URI in the form of api://your ngrok/botid-{your AppID}.

The following image shows the domain name:

Note

If you're using a tunneling service such as ngrok, ensure you update the value whenever your ngrok subdomain changes. For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2, where f631****.ngrok.io is the new ngrok subdomain name.
Select Add a scope.
In the panel that appears, enter access_as_user as the Scope name.
Set Who can consent? to Admins and users.
To configure the admin and user consent prompts with appropriate values for access_as_user scope, provide the following information in the fields:
- Enter Teams can access the user’s profile as Admin consent display name.
- Enter Allows Teams to call the app’s web APIs as the current user as Admin consent description.
- Enter Teams can access the user profile and make requests on the user’s behalf as User consent display name.
- Enter Enable Teams to call this app’s APIs with the same rights as the user as User consent description.
Ensure that State is set to Enabled.
Select Add scope to save.

Note

The Scope name should match with the Application ID URI with /access_as_user appended at the end.
api://9179****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
In the Authorized client applications section, identify the applications that you want to authorize for your app’s web application.
Select Add a client application.
Enter Client ID: 1fec8e78-bce4-4aaf-ab1b-5451cc387264 for Teams mobile or desktop application.

You can enter Client ID: 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 for Teams web application.

The following image displays the Client ID:
In the left panel, select API Permissions.

Note

Users need to consent to the API permissions only if the Azure Active Directory app is registered in a different tenant.
Select Add a permission.
Select Microsoft Graph.
Select Delegated permissions.
Add User.Read in permission.
Select Add permissions.
From the left panel, select Authentication to set a redirect URI.

Note

If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
1. Select Add a platform.
2. Select Web.
3. Enter the redirect URI for your app by appending auth-end to fully qualified domain name:
  https://your ngrok/auth-end.
4. Enable Implicit grant and hybrid flows by selecting the following checkboxes:
  - ID tokens
  - Access tokens
5. Select Configure.

To update Manifest

Select Manifest from the left pane.
Set the configuration item "accessTokenAcceptedVersion":2. If not set, change its value to 2 and select Save.

Note

If you're already testing your bot in Teams, sign out of this app and sign out of Teams. To see this change, sign in again.

To set up Bot Service connection

Go to Configuration page > Add OAuth Connection Settings.
Select Add OAuth Connection Settings.
In New Connection Setting, enter the following details:
- Name enter name for your new connection setting. You can use the name in the settings of your bot service code.
- Service Provider select Azure Active Directory V2.
- Client ID you are Microsoft App ID.
- Client secret Value of the client secret ID.
- Token Exchange URL use the Application ID URI obtained previously while exposing API endpoint.
- Tenant ID enter common.
- Scopes enter User.Read.
Select Save.

Set up app settings and manifest files

9 minutes remaining

Go to appsettings.json in the cloned repository.
Open appsettings.json in Visual Studio.
Update the following information:
- Set "MicrosoftAppType" to MultiTenant.
- Set "MicrosoftAppId" to your bot's Microsoft App ID.
- Set "MicrosoftAppPassword" to your bot's client secret ID value.
- Set "MicrosoftAppTenantId" as blank for MultiTenant bot.
Go to manifest.json in the cloned repository.
Open manifest.json in Visual Studio and make the following changes:

Replace all occurrences of <<YOUR-MICROSOFT-APP-ID>> with your bot's Microsoft App ID.

Build and run the service

7 minutes remaining

To build and run the service using Visual Studio or Command line

Visual Studio
Command line

Launch Visual Studio.
Go to File > Open > Project/Solution.
Select TeamsFileUpload.csproj file from samples > bot-file-upload > csharp folder.
Open Solution Explorer from View.
Press F5 to run the project.
Select Yes if the following dialog appears:

A webpage opens with a message Your bot is ready!.

Go to Microsoft-Teams-Samples > samples > bot-file-upload > csharp in Command Prompt window and enter the following command:

dotnet run

Dotnet

Add file upload bot in Teams

5 minutes remaining

In your cloned repository, Go to Microsoft-Teams-Samples > samples > bot-file-upload > csharp > TeamsAppManifest.
Create a .zip with the following files that are present in the TeamsAppManifest folder:

manifest.json
icon-outline.png
icon-color.png

Go to Microsoft Teams.
In the left panel, select Apps > Manage your apps.
Select Upload a custom app.
Select Open to upload the .zip file that you created in the TeamsAppManifest folder.
Select Add.
In the compose message area, type hi and wait for few seconds for it to respond with a card.

Interacting with the bot in Teams

3 minutes remaining

Send a message to the bot. It responds with a card for the permission to upload the file.
Select Allow. A teams-logo.png file is uploaded to the file directory, which is ready for download.
Send a file to the bot as an attachment in Teams. It responds with a message Received and Saved. You can view the attachment from the Files tab.
Send an image as an attachment. It responds with a message Received and saved. You can view the image on the chat window and from Files tab.

Note

After the bot is installed in the personal scope, the user enters into a one-on-one chat conversation with the bot.