UI Library Sample - File Sharing using UI Chat Composite

Browse code

This is a complete sample showcasing integration of file sharing feature into an Azure Communication Services powered React application.

For a step-by-step guide to building this sample yourself, see the associated tutorial.

This sample includes:

• A React based application showcasing file sharing feature using UI chat composite provided by the Azure Communication Services UI library.
• Backend API for uploading file to Azure Blob Storage built using Typescript Azure Functions.

This Quickstart for FileSharing is not to be confused with the Teams Interopability feature where a ACS user can receive SharePoint files with proper file permissions shared by a Teams user. This feature is currently available in Public Preview, for more information please refer to Supplemental Terms of Use for Microsoft Azure Previews.

Code organization

• app/ - This directory contains source code for the React frontend.
  • app/src/App.tsx - Application entry-point. Built primarily using UI library's ChatComposite.
• api/ - This directory contains the source code for the backend API.
  • api/UploadFileToAzureBlobStore - Azure Function to upload the file to Azure Blob Store.

Prerequisites - Azure Resources

You need a few Azure resources before running this sample locally.

• An Azure account with an active subscription. Create an account for free .
• Node.js Active LTS and Maintenance LTS versions (16.x.x is recommended).
• An active Communication Services resource. Create a Communication Services resource.
• An identity with Chat scope. Generate an identity using the Azure Portal.
• Azure Storage Account
• Azure Blob Storage
  • For using azure storage in production environments, please follow the azure storage application architecture guide

Prerequisites -- Configuration

Once you have these resources setup, you need to replace the placeholders in these two files:

• api/local.settings.json
  • Enter the access key based connection string for the Azure Storage account.
• Enter all the required details in app/src/App.tsx.
  • A UserId and Token can be generated using Azure Portal.
  • ThreadId can be generated by following Microsoft Docs.

Prerequisites - Developement Environment

Install NPM dependencies

• Install dependencies of Azure Static Web Apps npm install
• Install dependencies of Azure functions backend cd api && npm install
• Install dependencies of front-end application cd app && npm install

Run the application

You'll need to run the client and server separately:

• Start the front-end application: cd app && npm start
• Start the azure functions backend: cd api && npm start
• Start the Static Web Apps proxy: npm run start:dev

Navigate to your application at localhost:4280.