Third-party cloud storage app

Microsoft Teams provides the flexibility to change the default storage from OneDrive and SharePoint to a preferred third-party cloud storage provider app. When a file is drag-dropped into the message compose area of a Teams chat or channel, you can allow the file to be stored in a third-party cloud storage using Microsoft Teams JavaScript client library (TeamsJS).

Prerequisites

For Teams app to support third-party cloud storage for drag-dropped files:

• Use the latest version of the TeamsJS SDK.

• The app manifest (previously called Teams app manifest) must be configured with the app ID of the third-party storage app. Search for the property named defaultFilesUploadAppId and configure the app ID.

  Note

  Use plain string only and do not use inverted commas.

  Alternatively, admins can also configure the third-party cloud storage app ID. For more information, see admin settings for file drag-drop to third-party storage.

• The app manifest must have the first action as Upload. This action automatically opens the app in upload mode when files are drag-dropped into the message compose area.

  Following code sample shows the first action added as Upload under composeExtensions:

  JSON

  {
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
    "manifestVersion": "1.9",
    "version": "2.3.1",
    "id": "id",
    "developer": {
      "name": "Microsoft",
      "websiteUrl": "https://dev.botframework.com",
      "privacyUrl": "https://privacy.microsoft.com",
      "termsOfUseUrl": "https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx"
    },
    "name": {
      "short": "Third-Party Cloud Storage",
      "full": "Third-Party Cloud Storage Integration"
    },
    "description": {
      "short": "Enable drag-and-drop file uploads to third-party cloud storage.",
      "full": "This app enables seamless integration with third-party cloud storage providers for files dragged and dropped in Teams chats or channels. It uses the Microsoft Teams JavaScript SDK's thirdPartyCloudStorage module to fetch and upload files efficiently."
    },
    "icons": {
      "outline": "outline.png",
      "color": "color.png"
    },
    "accentColor": "#FFFFFF",
    "bots": [
      {
        "botId": "${{AAD_APP_CLIENT_ID}}",
        "needsChannelSelector": false,
        "isNotificationOnly": false,
        "supportsCalling": false,
        "supportsVideo": false,
        "supportsFiles": false,
        "scopes": [
          "team",
          "personal",
          "groupChat"
        ]
      }
    ],
    "composeExtensions": [
      {
        "botId": "botid",
        "canUpdateConfiguration": false,
        "commands": [
          {
            "id": "getUpload",
            "type": "action",
            "title": "Create Card",
            "description": "Example of creating a Card",
            "initialRun": false,
            "fetchTask": true,
            "context": [
              "compose"
            ],
            "parameters": [
              {
                "name": "param",
                "title": "param",
                "description": ""
              }
            ]
          }
        ]
      }
    ],
    "permissions": [
      "identity"
    ],
    "validDomains": [
      "*.testApp.com"
    ]
  }
  

Drag-drop files to third-party cloud storage

If you want your Teams app to have a third-party storage of your preference, you must use the getDragAndDropFiles API of thirdPartyCloudStorage in TeamsJS SDK. This API enables uploading files from the message compose area of a Teams chat or channel to third-party storage app.

Note

The thirdPartyCloudStorage API is used only in scenarios when the files are drag-dropped. It's not used when the files are added using the plus icon in the message compose toolbar.

To implement third-party cloud storage for the drag-dropped files in Teams, follow these steps:

1. Ensure the property defaultFilesUploadAppId is configured with the third-party storage app ID and the first action is set as Upload in the app manifest.

2. Create the unique ID using the following parameters from the application context:

   • const uniqueIdForChats = replyToId + id (that is, threadId).

     All the above values are present in the application context. If "commandContext" = "thirdParty", it helps third-party cloud storage app to determine that the app is opened programmatically. If replyToId isn't present in the context, then the unique ID is ""+threadId.

     The following image shows the sample of the application context with the values to create the unique ID highlighted:

     

3. Use the getDragAndDropFiles API from the thirdPartyCloudStorage in TeamsJS SDK for the third-party storage app to fetch the drag-dropped files.

4. A callback function is implemented to receive and handle the files.

   Callback: (files: FilesFor3PStorage[], error?: SdkError): void;**

   The following code sample shows the callback function:

   JavaScript

   microsoftTeams.initialize(() => {
     microsoftTeams.getContext((context) => {
       console.log(`Context is ${JSON.stringify(context)}`);
     });
   
     let inputthreadId = "19:8c24b2ac42924ca3b8e220b3a48d8f9a@thread.v2";
     let replyChainIdforChats = "";
     const uniqueIdForChats = replyChainIdforChats + inputthreadId;
     let mediaData = [];
   
     microsoftTeams.thirdPartyCloudStorage.getDragAndDropFiles(inputthreadId, (medias, err) => {
       document.getElementById("hubState").innerText = JSON.stringify(inputthreadId);
       console.log("inside getDragAndDropFiles");
   
       if (err) {
         console.log("error while calling getDragAndDropFiles API");
         document.getElementById("getDragAndDropFiles").innerText = JSON.stringify(err);
         console.log(err);
         return;
       }
   
       console.log("no error");
       const media = medias;
       console.log(media);
   
       medias.forEach((media) => {
           console.log(`Name: ${media.name}`);
           console.log(`Type: ${media.type}`);
           console.log(`Size: ${media.size}`);
   
           mediaData.push({
               name: media.name,
               type: media.type,
               size: media.size,
           });
   
           // Example 1: Bind mediaData to HTML (e.g., create a table row for each file)
           // Example 2: Add blob storage functionality for downloading the file
       });
     });
   });
   

5. The third-party cloud storage app then uploads the files received to third-party cloud storage.

Here's how the files are uploaded to third-party cloud storage app:

1. When the files are drag-dropped in the message compose area, the files are temporarily stored in the Teams cache.

2. The third-party cloud storage app calls the getDragAndDropFiles API using the uniqueID to fetch the files that were drag-dropped.

3. The thirdPartyCloudStorage API returns the files that were drag-dropped.

4. The files are received in the third-party cloud storage app through the callback function.

5. The third-party cloud storage app then uploads the files to their storage.

Code sample

Sample name	Description	Node.js	.NET	Python
Third-party cloud storage	Demonstrates how to implement third-party cloud storage app for files that are drag-dropped in the message compose area.	View	View	View

See also

App manifest