User/mahimashukla/3 p drag and drop

apps/teams-test-app/e2e-test-data/thirdPartyCloudStorage.json

@@ -0,0 +1,19 @@
+{
+  "name": "ThirdPartyCloudStorage",
+  "platforms": "Web",
+  "version": ">2.18.0",
+  "checkIsSupported": {
+    "domElementName": "thirdPartyCloudStorageCapability",
+    "expectedOutput": "ThirdPartyCloudStorage is not supported"
+  },
+  "testCases": [
+    {
+      "title": "thirdPartyCloudStorage API Call - Success",
+      "type": "callResponse",
+      "boxSelector": "#box_thirdPartyCloudStorage",
+      "inputValue": "testThreadId",
+      "expectedAlertValue": "thirdPartyCloudStorage called with ##JSON_INPUT_VALUE##",
+      "expectedTestAppValue": "Received files in callback"
+    }
+  ]
+}

apps/teams-test-app/src/App.tsx

@@ -53,6 +53,7 @@ import SecondaryBrowserAPIs from './components/SecondaryBrowserAPIs';
 import SharingAPIs from './components/SharingAPIs';
 import StageViewAPIs from './components/StageViewAPIs';
 import TeamsCoreAPIs from './components/TeamsCoreAPIs';
+import ThirdPartyCloudStorageAPIs from './components/ThirdPartyCloudStorageAPIs';
 import { isTestBackCompat } from './components/utils/isTestBackCompat';
 import Version from './components/Version';
 import VideoAPIs from './components/VideoEffectsApis';
@@ -175,6 +176,7 @@ const App = (): ReactElement => {
         <StageViewAPIs />
         <TeamsCoreAPIs />
         <TeamsAPIs />
+        <ThirdPartyCloudStorageAPIs />
         <VideoAPIs />
         <VideoExAPIs />
         <VisualMediaAPIs />

apps/teams-test-app/src/components/ThirdPartyCloudStorageAPIs.tsx

@@ -0,0 +1,45 @@
+import { SdkError, thirdPartyCloudStorage } from '@microsoft/teams-js';
+import React, { ReactElement } from 'react';
+
+import { ApiWithTextInput } from './utils';
+import { ModuleWrapper } from './utils/ModuleWrapper';
+
+const ThirdPartyCloudStorage = (): React.ReactElement =>
+  ApiWithTextInput<string>({
+    name: 'checkCapabilityThirdPartyCloudStorage',
+    title: 'thirdPartyCloudStorage',
+    onClick: {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      validateInput: (input) => {
+        if (!input) {
+          return; // API allows for no input to be provided
+        }
+        return;
+      },
+      submit: async (input, setResult) => {
+        // input will be the thread id
+        const filesCallback = (
+          attachments: thirdPartyCloudStorage.FilesFor3PStorage[],
+          error?: SdkError | undefined,
+        ): void => {
+          if (error) {
+            setResult('error received in callback' + JSON.stringify(error));
+          } else {
+            console.log(attachments);
+            setResult('Received files in callback');
+          }
+        };
+        const result = thirdPartyCloudStorage.getDragAndDropFiles(input, filesCallback);
+        setResult(JSON.stringify(result));
+        return 'thirdPartyCloudStorage.getDragAndDropFiles() was called';
+      },
+    },
+  });
+
+const ThirdPartyCloudStorageAPIs = (): ReactElement => (
+  <ModuleWrapper title="ThirdPartyCloudStorage">
+    <ThirdPartyCloudStorage />
+  </ModuleWrapper>
+);
+
+export default ThirdPartyCloudStorageAPIs;

change/@microsoft-teams-js-e156a031-732a-4f22-8c0c-51d49568bff1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added support for drag and dropping files from third party storage providers using the `thirdPartyCloudStorage` capability",
+  "packageName": "@microsoft/teams-js",
+  "email": "mahimashukla@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/teams-js/src/public/index.ts

@@ -76,6 +76,7 @@ export { visualMedia } from './visualMedia';
 export { webStorage } from './webStorage';
 export { call } from './call';
 export { appInitialization } from './appInitialization';
+export { thirdPartyCloudStorage } from './thirdPartyCloudStorage';
 export {
   callbackFunctionType,
   enablePrintCapability,

packages/teams-js/src/public/runtime.ts

@@ -205,6 +205,7 @@ interface IRuntimeV3 extends IBaseRuntime {
         readonly joinedTeams?: {};
       };
     };
+    readonly thirdPartyCloudStorage?: {};
     readonly teamsCore?: {};
     readonly video?: {
       readonly mediaStream?: {};

packages/teams-js/src/public/thirdPartyCloudStorage.ts

@@ -0,0 +1,261 @@
+import { sendMessageToParent } from '../internal/communication';
+import { ensureInitialized } from '../internal/internalAPIs';
+import { createFile, decodeAttachment } from '../internal/mediaUtil';
+import { getLogger } from '../internal/telemetry';
+import { errorNotSupportedOnPlatform, FrameContexts } from './constants';
+import { ErrorCode, SdkError } from './interfaces';
+import { runtime } from './runtime';
+
+const Files3PLogger = getLogger('thirdPartyCloudStorage');
+
+/**
+ * Extended files API 3P storage providers, features like sending Blob from Teams to 3P app on user
+ * actions like drag and drop to compose
+ * @beta
+ */
+export namespace thirdPartyCloudStorage {
+  /** Get context callback function type */
+  let files: FilesFor3PStorage[] = [];
+  let helper: AttachmentListHelper = {
+    fileType: '',
+    assembleAttachment: [],
+  };
+  let lastChunkVal = true; // setting it to true so that the very first file and first chunk does not fail
+
+  /**
+   * Object used to represent a file
+   * @beta
+   *
+   */
+  export interface FilesFor3PStorage extends Blob {
+    /**
+     * A number that represents the number of milliseconds since the Unix epoch
+     */
+    lastModified: number;
+    /**
+     * Name of the file
+     */
+    name: string;
+    /**
+     * file type
+     */
+    type: string;
+    /**
+     * A string containing the path of the file relative to the ancestor directory the user selected
+     */
+    webkitRelativePath?: string;
+  }
+
+  /**
+   * File chunks an output of getDragAndDropFiles API from platform
+   * @beta
+   */
+  export interface FileChunk {
+    /**
+     * Base 64 data for the requested uri
+     */
+    chunk: string;
+    /**
+     * chunk sequence number
+     */
+    chunkSequence: number;
+    /**
+     * whether or not this is the final chunk in a file
+     */
+    endOfFile: boolean;
+  }
+
+  /**
+   * Output of getDragAndDropFiles API from platform
+   * @beta
+   */
+  export interface FileResult {
+    /**
+     * Error encountered in getDragAndDropFiles API
+     */
+    error?: SdkError;
+    /**
+     * File chunk which will be assemebled and converted into a blob
+     */
+    fileChunk: FileChunk;
+    /**
+     * File index of the file for which chunk data is getting recieved
+     */
+    fileIndex: number;
+    /**
+     * File type/MIME type which is getting recieved
+     */
+    fileType: string;
+    /**
+     * Indicates whether this file is the last one in a sequence.
+     */
+    isLastFile: boolean;
+    /**
+     * The name of the file.
+     */
+    fileName: string;
+  }
+
+  /**
+   * Helper object to assembled file chunks
+   * @beta
+   */
+  export interface AssembleAttachment {
+    /** A number representing the sequence of the attachment in the file chunks. */
+    sequence: number;
+    /** A Blob object representing the data of the file chunks. */
+    file: Blob;
+  }
+
+  /**
+   * Helper class for assembling files
+   * @beta
+   */
+  export interface AttachmentListHelper {
+    /** A string representing the MIME type of the file */
+    fileType: string;
+    /** An array of {@link AssembleAttachment | AssembleAttachment} objects representing files to be sent as attachment */
+    assembleAttachment: AssembleAttachment[];
+  }
+
+  /**
+   * Defines the Callback function received from Third Party App
+   * @beta
+   */
+  export interface DragAndDropFileCallback {
+    /** Callback from third party app */
+    (files: FilesFor3PStorage[], error?: SdkError): void;
+  }
+
+  let callback: DragAndDropFileCallback | null = null;
+
+  /**
+   * Get drag-and-drop files using a callback.
+   *
+   * @param {string} dragAndDropInput - Teams thread id or Teams conversation id from a Teams chat/channel
+   * @param {DragAndDropFileCallback} dragAndDropFileCallback - callback
+   *   A callback function to handle the result of the operation
+   * @beta
+   */
+  export function getDragAndDropFiles(
+    dragAndDropInput: string,
+    dragAndDropFileCallback: DragAndDropFileCallback,
+  ): void {
+    if (!dragAndDropFileCallback) {
+      throw new Error('[getDragAndDropFiles] Callback cannot be null');
+    }
+    if (!dragAndDropInput || dragAndDropInput === '') {
+      const invalidInput: SdkError = { errorCode: ErrorCode.INVALID_ARGUMENTS };
+      dragAndDropFileCallback([], invalidInput);
+      return;
+    }
+
+    ensureInitialized(runtime, FrameContexts.content, FrameContexts.task);
+    if (!isSupported()) {
+      throw errorNotSupportedOnPlatform;
+    }
+
+    if (callback) {
+      callback = null;
+      throw new Error('getDragAndDropFiles cannot be called twice');
+    } else {
+      callback = dragAndDropFileCallback;
+    }
+    lastChunkVal = true;
+
+    sendMessageToParent(
+      'thirdPartyCloudStorage.getDragAndDropFiles',
+      [dragAndDropInput],
+      handleGetDragAndDropFilesCallbackRequest,
+    );
+  }
+
+  function handleGetDragAndDropFilesCallbackRequest(fileResult: FileResult): void {
+    if (callback) {
+      if (fileResult && fileResult.error) {
+        callback([], fileResult.error);
+        callback = null;
+      } else {
+        if (fileResult && fileResult.fileChunk) {
+          try {
+            if (!lastChunkVal && fileResult.fileChunk.chunkSequence === 0) {
+              // last chunk value was false
+              Files3PLogger("Last chunk is not received or 'endOfFile' value for previous chunk was not set to true");
+              lastChunkVal = true; // for next iteration
+
+              callback([], {
+                errorCode: ErrorCode.INTERNAL_ERROR,
+                message: 'error occurred while receiving data',
+              });
+              files = [];
+              callback = null;
+            }
+            const assemble: AssembleAttachment | null = decodeAttachment(fileResult.fileChunk, fileResult.fileType);
+            if (assemble) {
+              helper.assembleAttachment.push(assemble);
+            } else {
+              Files3PLogger(
+                `Received a null assemble attachment for when decoding chunk sequence ${fileResult.fileChunk.chunkSequence}; not including the chunk in the assembled file.`,
+              );
+              callback
+                ? callback([], { errorCode: ErrorCode.INTERNAL_ERROR, message: 'error occurred while receiving data' })
+                : (callback = null);
+              files = [];
+              callback = null;
+              lastChunkVal = true;
+            }
+
+            // we will store this value to determine whether we received the last chunk of the previous file
+            lastChunkVal = fileResult.fileChunk.endOfFile;
+            if (fileResult.fileChunk.endOfFile) {
+              const fileBlob = createFile(helper.assembleAttachment, helper.fileType);
+
+              if (fileBlob) {
+                // Convert blob to File
+                const receivedFile = new File([fileBlob], fileResult.fileName, {
+                  type: fileBlob.type,
+                });
+                files.push(receivedFile);
+              }
+
+              if (fileResult.isLastFile && callback) {
+                callback(files, fileResult.error);
+                files = [];
+                callback = null;
+                lastChunkVal = true;
+              }
+
+              helper = {
+                fileType: '',
+                assembleAttachment: [],
+              };
+            }
+          } catch (e) {
+            if (callback) {
+              callback([], { errorCode: ErrorCode.INTERNAL_ERROR, message: e });
+              files = [];
+              callback = null;
+              lastChunkVal = true;
+            }
+          }
+        } else {
+          callback([], { errorCode: ErrorCode.INTERNAL_ERROR, message: 'data received is null' });
+          files = [];
+          callback = null;
+          lastChunkVal = true;
+        }
+      }
+    }
+  }
+
+  /**
+   * Checks if the thirdPartyCloudStorage capability is supported by the host
+   * @returns boolean to represent whether the thirdPartyCloudStorage capability is supported
+   *
+   * @throws Error if {@linkcode app.initialize} has not successfully completed
+   * @beta
+   */
+  export function isSupported(): boolean {
+    return ensureInitialized(runtime) && runtime.supports.thirdPartyCloudStorage ? true : false;
+  }
+}