You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-file-attachment-csharp.md
This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for C#.
11
11
12
12
## Sample code
13
-
Find the finalized code of this tutorial on[GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
13
+
Find the finalized code for this tutorial at[GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
14
14
15
15
## Prerequisites
16
16
17
-
*You went through the quickstart -[Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md).
18
-
*Created an Azure Communication Services resource. For details, see[Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to **record your connection string** for this tutorial.
19
-
*You set up a Teams meeting using your business account and have the meeting URL ready.
20
-
*You have the Chat SDK for C# (@azure/communication-chat) 1.3.0 or the latest. See [here](https://www.nuget.org/packages/Azure.Communication.Chat).
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
21
22
22
## Handle file attachments
23
23
@@ -57,7 +57,7 @@ For example, the following JSON shows what `ChatAttachment` might look like for
57
57
]
58
58
```
59
59
60
-
Now let's go back to event handler we created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md)to add some extra logic to handle attachments with `ChatAttachmentType` of `file`:
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
61
62
62
```csharp
63
63
@@ -89,7 +89,6 @@ await foreach (ChatMessage message in allMessages)
89
89
90
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
91
92
-
93
92
## Handle image attachments
94
93
95
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.
@@ -121,5 +120,4 @@ foreach (ChatAttachment imageAttachment in imageAttachments)
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-file-attachment-javascript.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,8 +21,8 @@ Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Sa
21
21
22
22
## Goals
23
23
24
-
1. Render file attachment in the message thread. Each file attachment card has an **Open** button.
25
-
2. Render image attachments as inline images.
24
+
- Render file attachment in the message thread. Each file attachment card has an **Open** button.
25
+
- Render image attachments as inline images.
26
26
27
27
## Handle file attachments
28
28
@@ -215,22 +215,22 @@ npm start
215
215
216
216
2. Now let's send some file attachments from Teams client like this:
217
217
218
-
:::image type="content" source="./media/meeting-interop-features-file-attachment-1.png" alt-text="A screenshot of Teams client shown a sent message with three file attachments.":::
218
+
:::image type="content" source="./media/meeting-interop-features-file-attachment-1.png" alt-text="A screenshot of Teams client showing a sent message with three file attachments.":::
219
219
220
220
3. Then you should see the new message being rendered along with file attachments:
221
221
222
-
:::image type="content" source="./media/meeting-interop-features-file-attachment-2.png" alt-text="A screenshot of sample app shown a received incoming message with three file attachments.":::
222
+
:::image type="content" source="./media/meeting-interop-features-file-attachment-2.png" alt-text="A screenshot of sample app showing a received incoming message with three file attachments.":::
223
223
224
224
225
225
## Handle image attachments
226
226
227
227
Image attachments need to be treated differently than standard `file` attachments. Image attachments have the `attachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
228
228
229
-
Before continuing, complete the tutorial that demonstrates [how you can enable inline image support in your chat app](../meeting-interop-features-inline-image.md). This tutorial desribes how to fetch images that require a communication token in the request header. Upon receiving the image blob, we need to create an `ObjectUrl` that points to this blob. Then we inject this URL to`src` attribute of each inline image.
229
+
Before continuing, complete the tutorial that demonstrates [how to enable inline image support in your chat app](../meeting-interop-features-inline-image.md). This tutorial describes how to fetch images that require a communication token in the request header. Upon receiving the image blob, we need to create an `ObjectUrl` that points to this blob. Then we inject this URL into the`src` attribute of each inline image.
230
230
231
231
Now you're familiar with how inline images work, and it's easy to render image attachments just like a regular inline image.
232
232
233
-
First, inject an `image` tag to message content whenever there's an image attachment:
233
+
First, inject an `image` tag into message content whenever there's an image attachment:
234
234
235
235
```js
236
236
asyncfunctionrenderReceivedMessage(event) {
@@ -295,7 +295,7 @@ function fetchPreviewImages(attachments) {
295
295
});
296
296
}
297
297
```
298
-
This function needs a `tokenString` so we need to have a global copy of it and initialize in `init()` as demonstrated in the following code snippet:
298
+
This function needs a `tokenString` so we need a global copy initialized in `init()` as demonstrated in the following code snippet:
299
299
300
300
```js
301
301
var tokenString ='';
@@ -319,12 +319,12 @@ Now you have image attachment support. Continue to run the code and see it in ac
319
319
320
320
1. Send some image attachments from Teams client like this:
321
321
322
-
:::image type="content" source="./media/meeting-interop-features-file-attachment-3.png" alt-text="A screenshot of Teams client shown a send box with an image attachment uploaded.":::
322
+
:::image type="content" source="./media/meeting-interop-features-file-attachment-3.png" alt-text="A screenshot of Teams client showing a send box with an image attachment uploaded.":::
323
323
324
324
2. Upon sending the image attachment, notice that it becomes an inline image on the Teams client side:
325
325
326
-
:::image type="content" source="./media/meeting-interop-features-file-attachment-4.png" alt-text="A screenshot of Teams client shown a message with the image attachment sent to the other participant.":::
326
+
:::image type="content" source="./media/meeting-interop-features-file-attachment-4.png" alt-text="A screenshot of Teams client showing a message with the image attachment sent to the other participant.":::
327
327
328
328
3. Return to the sample app and make sure the same image is rendered:
329
329
330
-
:::image type="content" source="./media/meeting-interop-features-file-attachment-5.png" alt-text="A screenshot of sample app shown an incoming message with one inline image rendered.":::
330
+
:::image type="content" source="./media/meeting-interop-features-file-attachment-5.png" alt-text="A screenshot of sample app showing an incoming message with one inline image rendered.":::
# Tutorial: Enable file attachment support in your Chat app
16
16
17
-
The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. File attachments can only be sent by a Teams user to an Azure Communication Services user. Note that sending file attachments from Azure Communication Services user to Teams user isn't currently supported, see the current capabilities of[Teams Interop Chat](../../concepts/interop/guest/capabilities.md) for details.
17
+
The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. Only a Teams user can send file attachments to an Azure Communication Services user. An Azure Communication Services user can't send file attachments to a to Teams user. For the current capabilities, see[Teams Interop Chat](../../concepts/interop/guest/capabilities.md).
18
18
19
19
## Add file attachment support
20
20
21
-
The Chat SDK provides `previewUrl` for each file attachment. Specifically, the `previewUrl`provides a link to a webpage on the SharePoint where the user can see the content of the file, edit the file and download the file if permission allows.
21
+
The Chat SDK provides `previewUrl` for each file attachment. Specifically, the `previewUrl`links to a webpage on SharePoint where the user can see the content of the file, edit the file, and download the file if permission allows.
22
22
23
-
You should be aware of couple constraints that come with this feature:
23
+
Some constraints associated with this feature:
24
24
25
-
1. The Teams admin of the sender's tenant could impose policies that limits or disable this feature entirely. For example, the Teams admin could disable certain permissions (such as "Anyone") that could cause the file attachment URLs (`previewUrl`) to be inaccessible.
26
-
2. We currently only support the following file permissions:
27
-
- "Anyone," and
28
-
- "People you choose" (with email address)
25
+
- The Teams admin of the sender's tenant could impose policies that limit or disable this feature entirely. For example, the Teams admin could disable certain permissions (such as "Anyone") that could cause the file attachment URL (`previewUrl`) to be inaccessible.
26
+
- We currently support only these two file permissions:
27
+
- "Anyone," and
28
+
- "People you choose" (with email address)
29
29
30
-
The Teams user should be made aware of that all other permissions (such as "People in your organization") aren't supported. The Teams user should double check if the default permission is supported after uploading the file on their Teams client.
31
-
3. The direct download URL (`url`) isn't supported.
30
+
Let your Teams users know that all other permissions (such as "People in your organization") aren't supported. Your Teams users should double check to make sure the default permission is supported after uploading the file on their Teams client.
31
+
- The direct download URL (`url`) isn't supported.
32
32
33
-
In addition to regular files (with `AttachmentType` of `file`), the Chat SDK also provides the `AttachmentType` of `image`. Use it for image attachments that mirror the behavior of how Microsoft Teams client converts image attachment to inline images at the UI layer. For more information, see [Handle image attachments](#handle-image-attachments).
33
+
In addition to regular files (with `AttachmentType` of `file`), the Chat SDK also provides the `AttachmentType` of `image`. Azure Communication Services users can attach images in a way that mirrors the behavior of how Microsoft Teams client converts image attachment to inline images at the UI layer. For more information, see [Handle image attachments](#handle-image-attachments).
34
34
35
-
Images added via "Upload from this device" renders on Teams side, and Chat SDK returns such attachments as `image`. For images uploaded via "Attach cloud files" however, images are treated as regular files on the Teams side, so Chat SDK returns such attachments as `file`.
35
+
Azure Communication Services users can add images via **Upload from this device**, which renders on the Teams side and Chat SDK returns such attachments as `image`. For images uploaded via **Attach cloud files** however, images are treated as regular files on the Teams side, so Chat SDK returns such attachments as `file`.
36
36
37
-
Also note that only files uploaded via drag-and-drop or via attachment menu of "Upload from this device" and "Attach cloud files" are supported. Some messages with embedded media (such as video clips, audio messages, weather cards, and so on) are adaptive card, which currently isn't supported.
37
+
Also note that Azure Communication Services users can only upload files using drag-and-drop or via the attachment menu commands **Upload from this device** and **Attach cloud files**. Some messages with embedded media (such as video clips, audio messages, weather cards, and so on) are *adaptive card*, which currently isn't supported. For more information, see [Overview of adaptive cards for Microsoft Teams](/power-automate/overview-adaptive-cards.md)
# Tutorial: Enable inline image support in your Chat app
16
16
17
-
The Chat SDK is designed to work with Microsoft Teams seamlessly. Specifically, Chat SDK provides a solution to receive inline images sent by users from Microsoft Teams. Currently this feature is only available in the Chat SDK for JavaScript and C#.
17
+
The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. Specifically, Chat SDK provides a solution to receive inline images sent by users from Microsoft Teams. Currently this feature is only available in the Chat SDK for JavaScript and C#.
18
18
19
19
## Add inline image support
20
20
21
-
Inline images are images that are copied and pasted directly into the send box of the Teams client. For images that were uploaded via the **Upload from this device** menu or via drag-and-drop, such as images dragged directly to the send box in Teams, see [Tutorial: Enable file attachment support in your Chat app](./meeting-interop-features-file-attachment.md) to enable file attachment support as part of the file sharing feature. For images, see the [Handle image attachments](./meeting-interop-features-file-attachment.md#handle-image-attachments) section. To copy an image, the Teams user can either use their operating system's context menu to copy the image file, and then paste it into the send box of their Teams client or use keyboard shortcuts.
21
+
Inline images are images that are copied and pasted directly into the send box of the Teams client. For images that were uploaded using the **Upload from this device** menu or via drag-and-drop, such as images dragged directly to the send box in Teams, see [Tutorial: Enable file attachment support in your Chat app](./meeting-interop-features-file-attachment.md) to enable file attachment support as part of the file sharing feature. For images, see the [Handle image attachments](./meeting-interop-features-file-attachment.md#handle-image-attachments) section. To copy an image, the Teams user can either use their operating system's context menu to copy the image file, and then paste it into the send box of their Teams client, or use keyboard shortcuts.
22
22
23
-
The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline image. Note that some GIF images fetched from `previewUrl` might not be animated, and a static preview image may be returned instead. Developers are expected to use the `url` if the intention is to fetch animated images only.
23
+
The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline image. Some GIF images fetched from `previewUrl` might not be animated, and a static preview image may be returned instead. Developers need to use the `url` if the intention is to fetch animated images only.
24
24
25
25
26
26
::: zone pivot="programming-language-javascript"
@@ -34,8 +34,6 @@ The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline imag
34
34
35
35
## Next steps
36
36
37
-
For more information, see the following articles:
38
-
39
37
- Learn more about other [supported interoperability features](../../concepts/interop/guest/capabilities.md)
40
38
- Check out our [chat hero sample](../../samples/chat-hero-sample.md)
41
39
- Learn more about [how chat works](../../concepts/chat/concepts.md)
0 commit comments