Aplicación de almacenamiento en la nube de terceros

Microsoft Teams proporciona la flexibilidad de cambiar el almacenamiento predeterminado de OneDrive y SharePoint a una aplicación de proveedor de almacenamiento en la nube de terceros preferida. Cuando se arrastra un archivo al área de redacción de mensajes de un chat o canal de Teams, puede permitir que el archivo se almacene en un almacenamiento en la nube de terceros mediante la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS).

Requisitos previos

Para que la aplicación de Teams admita el almacenamiento en la nube de terceros para archivos arrastrados:

• Use la versión más reciente del SDK de TeamsJS.

• El manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams) debe configurarse con el identificador de aplicación de la aplicación de almacenamiento de terceros. Busque la propiedad denominada defaultFilesUploadAppId y configure el identificador de la aplicación.

  Nota:

  Use solo cadenas sin formato y no use comas invertidas.

  Como alternativa, los administradores también pueden configurar el identificador de aplicación de almacenamiento en la nube de terceros. Para obtener más información, consulte configuración de administrador para arrastrar y colocar archivos en el almacenamiento de terceros.

• El manifiesto de aplicación debe tener la primera acción como Upload. Esta acción abre automáticamente la aplicación en modo de carga cuando los archivos se arrastran y colocan en el área de redacción del mensaje.

  El ejemplo de código siguiente muestra la primera acción agregada como Upload en composeExtensions:

  {
    "$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"
    ]
  }
  

Arrastrar y colocar archivos al almacenamiento en la nube de terceros

Si desea que la aplicación de Teams tenga un almacenamiento de terceros de su preferencia, debe usar la API de en el getDragAndDropFiles SDK de thirdPartyCloudStorage TeamsJS. Esta API permite cargar archivos desde el área de redacción de mensajes de un chat o canal de Teams en una aplicación de almacenamiento de terceros.

Para implementar el almacenamiento en la nube de terceros para los archivos arrastrados en Teams, siga estos pasos:

1. Asegúrese de que la propiedad defaultFilesUploadAppId está configurada con el identificador de aplicación de almacenamiento de terceros y que la primera acción se establece como Upload en el manifiesto de la aplicación.

2. Cree el identificador único con los parámetros siguientes del contexto de la aplicación:

   • const uniqueIdForChats = replyToId + id (es decir, threadId).

     Todos los valores anteriores están presentes en el contexto de la aplicación. Si "commandContext" = "thirdParty"es , ayuda a la aplicación de almacenamiento en la nube de terceros a determinar que la aplicación se abre mediante programación. Si replyToId no está presente en el contexto, el identificador único es ""+threadId.

     En la imagen siguiente se muestra el ejemplo del contexto de la aplicación con los valores para crear el identificador único resaltado:

     

3. Use la getDragAndDropFiles API del thirdPartyCloudStorage SDK de TeamsJS para la aplicación de almacenamiento de terceros para capturar los archivos eliminados por arrastrar.

4. Se implementa una función de devolución de llamada para recibir y controlar los archivos.

   Devolución de llamada: (files: FilesFor3PStorage[], error?: SdkError): void;**

   En el ejemplo de código siguiente se muestra la función de devolución de llamada:

   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. A continuación, la aplicación de almacenamiento en la nube de terceros carga los archivos recibidos en el almacenamiento en la nube de terceros.

A continuación se muestra cómo se cargan los archivos en la aplicación de almacenamiento en la nube de terceros:

1. Cuando los archivos se arrastran y quitan en el área de redacción del mensaje, los archivos se almacenan temporalmente en la memoria caché de Teams.

2. La aplicación de almacenamiento en la nube de terceros llama a la getDragAndDropFiles API mediante uniqueID para capturar los archivos que se quitaron mediante arrastrar.

3. La thirdPartyCloudStorage API devuelve los archivos que se colocaron al arrastrar.

4. Los archivos se reciben en la aplicación de almacenamiento en la nube de terceros a través de la función de devolución de llamada.

5. A continuación, la aplicación de almacenamiento en la nube de terceros carga los archivos en su almacenamiento.

Ejemplo de código

Consulte también

Manifiesto de la aplicación