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/functions/uploadFileToAzureBlobStore.ts - 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 (20.9.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.

Development 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.

Currently, azure-functions-core-tools supports up to Node.js v20.9. If you're using a higher version (e.g., v22), you may encounter issues such as localhost:4280 showing a "This site can’t be reached" error.