How to implement File Save/Download feature in Teams Mobile Extention/App?

@Dhm - Thank you for bringing this issue to our attention.

To implement a file save/download feature in your Teams mobile extension/app based on React JS, follow these steps:
Step-by-Step Implementation

1. Update the manifest.json file:
   • Ensure your Teams app has the necessary device permissions by updating the manifest.json file. Add the devicePermissions property and specify media.

{

  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",

  "manifestVersion": "1.6",

  "version": "1.0.0",

  "id": "your-app-id",

  "developer": {

    "name": "Your Company",

    "websiteUrl": "https://yourwebsite.com",

    "privacyUrl": "https://yourwebsite.com/privacy",

    "termsOfUseUrl": "https://yourwebsite.com/terms"

  },

  "name": {

    "short": "Your App",

    "full": "Your Full App Name"

  },

  "description": {

    "short": "Short description of your app",

    "full": "Full description of your app"

  },

  "icons": {

    "outline": "outline.png",

    "color": "color.png"

  },

  "accentColor": "#FFFFFF",

  "devicePermissions": ["media"],

  // Add other necessary properties here

}

1. Add HTML Download Attribute:
   • In your React component, add an anchor tag with the download attribute to enable file downloading.

import React from 'react';

const FileDownloadComponent = () => {

  const fileUrl = 'path_to_your_file';

  return (

    <div>

      <a href={fileUrl} download="filename.jpg" className="download-link">

        Download File

      </a>

    </div>

  );

};

export default FileDownloadComponent;

1. Ensure Proper File Serving:
   • Make sure the file you want to download is properly served from your server or static file hosting. The URL used in the href attribute should be accessible from the mobile client.

Example React Component

Here is a complete example of a React component that includes a download link:

import React from 'react';

const FileDownloadComponent = () => {

  const fileUrl = 'https://example.com/path_to_your_file.jpg';  // Replace with your file URL

  return (

    <div>

      <h2>Download Your File</h2>

      <a href={fileUrl} download="your_file.jpg" className="download-link">

        Click here to download the file

      </a>

    </div>

  );

};

export default FileDownloadComponent;

• File Access: Make sure that the files are accessible and not behind authentication barriers unless you handle the authentication properly.
• Compatibility: Note that downloading files is only supported on the Android Teams mobile client and only unauthenticated files can be downloaded.
• Security: Ensure that your app follows security best practices for serving files, such as validating file URLs and ensuring that files are served over HTTPS.

By following these steps, you can implement a file save/download feature in your Teams mobile extension/app using React JS. This approach ensures that users can download files directly from your app on their mobile devices.

Ref Docs:

Add Media Capabilities to Teams App - Teams | Microsoft Learn
Enable Third-party Cloud Storage - Teams | Microsoft Learn
Plan your App - Overview - Teams | Microsoft Learn