|
| 1 | +--- |
| 2 | +title: Tutorial - Enable File Attachment Support |
| 3 | +author: jpeng-ms |
| 4 | +ms.author: jopeng |
| 5 | +ms.date: 04/10/2024 |
| 6 | +ms.topic: include |
| 7 | +ms.service: azure-communication-services |
| 8 | +--- |
| 9 | + |
| 10 | +This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for C#. |
| 11 | + |
| 12 | +## Sample code |
| 13 | +Find the finalized code for this tutorial at [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart). |
| 14 | + |
| 15 | +## Prerequisites |
| 16 | + |
| 17 | +* Complete the quickstart [Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md). |
| 18 | +* Create an Azure Communication Services resource as described in [Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to **record your connection string** for this tutorial. |
| 19 | +* Set up a Teams meeting using your business account and have the meeting URL ready. |
| 20 | +* Download the Chat SDK for C# (@azure/communication-chat) 1.3.0 or the latest. See [Azure Communication Chat client library](https://www.nuget.org/packages/Azure.Communication.Chat). |
| 21 | + |
| 22 | +## Handle file attachments |
| 23 | + |
| 24 | +The Chat SDK for C# returns a `ChatAttachmentType` of `file` for regular file attachments and `image` for inline images. |
| 25 | + |
| 26 | +```csharp |
| 27 | +public readonly partial struct ChatAttachmentType : IEquatable<ChatAttachmentType> |
| 28 | +{ |
| 29 | + private const string ImageValue = "image"; |
| 30 | + private const string FileValue = "file"; |
| 31 | + /// <summary> image. </summary> |
| 32 | + public static ChatAttachmentType Image { get; } = new ChatAttachmentType(ImageValue); |
| 33 | + /// <summary> file. </summary> |
| 34 | + public static ChatAttachmentType File { get; } = new ChatAttachmentType(FileValue); |
| 35 | +} |
| 36 | + |
| 37 | + |
| 38 | +``` |
| 39 | + |
| 40 | +For example, the following JSON shows what `ChatAttachment` might look like for an image attachment and a file attachment when receiving requests from the server side: |
| 41 | + |
| 42 | +```json |
| 43 | +"attachments": [ |
| 44 | + { |
| 45 | + "id": "08a182fe-0b29-443e-8d7f-8896bc1908a2", |
| 46 | + "attachmentType": "file", |
| 47 | + "name": "business report.pdf", |
| 48 | + "previewUrl": "https://contoso.sharepoint.com/:u:/g/user/h8jTwB0Zl1AY" |
| 49 | + }, |
| 50 | + { |
| 51 | + "id": "9d89acb2-c4e4-4cab-b94a-7c12a61afe30", |
| 52 | + "attachmentType": "image", |
| 53 | + "name": "Screenshot.png", |
| 54 | + "url": "https://contoso.communication.azure.com/chat/threads/19:[email protected]/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/original?api-version=2023-11-15-preview", |
| 55 | + "previewUrl": "https://contoso.communication.azure.com/chat/threads/19:[email protected]/messages/123/images/9d89acb2-c4e4-4cab-b94a-7c12a61afe30/views/small?api-version=2023-11-15-preview" |
| 56 | + } |
| 57 | +] |
| 58 | +``` |
| 59 | + |
| 60 | +Now let's go back to the event handler we created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md) and add some extra logic to handle attachments with `ChatAttachmentType` of `file`: |
| 61 | + |
| 62 | +```csharp |
| 63 | + |
| 64 | +await foreach (ChatMessage message in allMessages) |
| 65 | +{ |
| 66 | + // Get message attachments that are of type 'file' |
| 67 | + IEnumerable<ChatAttachment> fileAttachments = message.Content.Attachments.Where(x => x.AttachmentType == ChatAttachmentType.File); |
| 68 | + var chatAttachmentFileUris = new List<Uri>(); |
| 69 | + foreach (var file in fileAttachments) |
| 70 | + { |
| 71 | + chatAttachmentFileUris.Add(file.PreviewUri); |
| 72 | + } |
| 73 | + |
| 74 | + // Build message list |
| 75 | + if (message.Type == ChatMessageType.Html || message.Type == ChatMessageType.Text) |
| 76 | + { |
| 77 | + textMessages++; |
| 78 | + var userPrefix = message.Sender.Equals(currentUser) ? "[you]:" : ""; |
| 79 | + var strippedMessage = StripHtml(message.Content.Message); |
| 80 | + |
| 81 | + |
| 82 | + |
| 83 | + var chatAttachments = fileAttachments.Count() > 0 ? "[Attachments]:\n" + string.Join(",\n", chatAttachmentFileUris) : ""; |
| 84 | + messageList.Add(long.Parse(message.SequenceId), $"{userPrefix}{strippedMessage}\n{chatAttachments}"); |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +``` |
| 89 | + |
| 90 | +Specifically, for each file attachment, we get the `previewUrl` and construct a list of URLs in the `for loop`. Then we embed the string along with the chat message content. |
| 91 | + |
| 92 | +## Handle image attachments |
| 93 | + |
| 94 | +You need to handle image attachments differently than standard `file` attachments. Image attachments have the `ChatAttachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images. |
| 95 | + |
| 96 | +Before continuing, complete the [Enabling inline image support](../meeting-interop-features-inline-image.md) tutorial. To identity image attachments, we need to find out if the message content contains the same image ID from the attachments. |
| 97 | + |
| 98 | +```csharp |
| 99 | +bool isImageAttachment = message.Content.Message.Contains(x.Id); |
| 100 | +``` |
| 101 | + |
| 102 | +If this flag is true, then we should apply inline image logic to render it: |
| 103 | + |
| 104 | +```csharp |
| 105 | +IEnumerable<ChatAttachment> imageAttachments = message.Content.Attachments.Where(x => x.AttachmentType == ChatAttachmentType.Image); |
| 106 | +// Fetch image and render |
| 107 | +var chatAttachmentImageUris = new List<Uri>(); |
| 108 | +foreach (ChatAttachment imageAttachment in imageAttachments) |
| 109 | +{ |
| 110 | + client.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", communicationTokenCredential.GetToken().Token); |
| 111 | + var response = await client.GetAsync(imageAttachment.PreviewUri); |
| 112 | + var randomAccessStream = await response.Content.ReadAsStreamAsync(); |
| 113 | + await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () => |
| 114 | + { |
| 115 | + var bitmapImage = new BitmapImage(); |
| 116 | + await bitmapImage.SetSourceAsync(randomAccessStream.AsRandomAccessStream()); |
| 117 | + InlineImage.Source = bitmapImage; |
| 118 | + }); |
| 119 | + chatAttachmentImageUris.Add(imageAttachment.PreviewUri); |
| 120 | +} |
| 121 | +``` |
| 122 | + |
| 123 | +Now your app supports image attachments. |
0 commit comments