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
+5-8Lines changed: 5 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ ms.topic: include
7
7
ms.service: azure-communication-services
8
8
---
9
9
10
-
In this tutorial, you learn how to enable file attachment support using the Azure Communication Services Chat SDK for C#.
10
+
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
13
Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
As an example, the following JSON is an example of what `ChatAttachment` might look like for an image attachment and a file attachment when receiving requests from the server side:
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
41
42
42
```json
43
43
"attachments": [
@@ -89,14 +89,12 @@ 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
-
Now you know how you can handle file attachments.
93
-
94
92
95
93
## Handle image attachments
96
94
97
-
Image attachments need to be treated differently to 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
+
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.
98
96
99
-
Make sure you went through this tutorial [Enabling inline image support](../meeting-interop-features-inline-image.md)first. To identity image attachments, we need to check if message content contains the same image ID from the attachments.
97
+
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.
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-file-attachment-javascript.md
+27-27Lines changed: 27 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ ms.topic: include
7
7
ms.service: azure-communication-services
8
8
---
9
9
10
-
In this tutorial, you learn how to enable file attachment support using the Azure Communication Services Chat SDK for JavaScript.
10
+
This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for JavaScript.
11
11
12
12
## Sample code
13
13
Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/join-chat-to-teams-meeting).
@@ -19,10 +19,10 @@ Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Sa
19
19
* You've set up a Teams meeting using your business account and have the meeting URL ready.
20
20
* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.5.0 or the latest. See [here](https://www.npmjs.com/package/@azure/communication-chat).
21
21
22
-
## Goal
22
+
## Goals
23
23
24
-
1.Be able to render file attachment in the message thread. Each file attachment card has an "Open" button.
25
-
2.Be able to render image attachments as inline images.
24
+
1.Render file attachment in the message thread. Each file attachment card has an **Open** button.
As an example, the following JSON is an example of what `ChatAttachment` might look like for an image attachment and a file attachment:
63
+
For example, the following JSON shows what `ChatAttachment` might look like for an image attachment and a file attachment:
64
64
65
65
```json
66
66
"attachments": [
@@ -80,7 +80,7 @@ As an example, the following JSON is an example of what `ChatAttachment` might l
80
80
]
81
81
```
82
82
83
-
Now let's go back to event handler we have created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md)to add some extra logic to handle attachments with `attachmentType` of `file`:
83
+
Now let's go back to event handler we created in [Quickstart: Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md)and add some extra logic to handle attachments with `attachmentType` of `file`:
84
84
85
85
```js
86
86
chatClient.on("chatMessageReceived", (e) => {
@@ -124,7 +124,7 @@ function renderFileAttachments(attachment) {
124
124
125
125
```
126
126
127
-
Let's make sure we add some CSS for the attachment card as well:
127
+
Let's make sure we add some CSS for the attachment card:
128
128
129
129
```css
130
130
/* let's make chat popup scrollable */
@@ -193,44 +193,44 @@ Let's make sure we add some CSS for the attachment card as well:
193
193
194
194
```
195
195
196
-
That's it all we need for handling file attachments. Next let's run the code.
196
+
That's all we need for handling file attachments. Next let's run the code.
197
197
198
198
## Run the code
199
199
200
-
Webpack users can use the `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
200
+
For Webpack, you can use the `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
Open your browser and navigate to `http://localhost:8080/`. Enter the meeting URL and the thread ID.
214
+
1.Open your browser and navigate to `http://localhost:8080/`. Enter the meeting URL and the thread ID.
215
215
216
-
Now let's send some file attachments from Teams client like this:
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 shown a sent message with three file attachments.":::
219
219
220
-
Then you should see the new message being rendered along with file attachments:
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 shown a received incoming message with three file attachments.":::
223
223
224
224
225
225
## Handle image attachments
226
226
227
-
Image attachments need to be treated differently to standard `file` attachments. Image attachment have the `attachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
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 we go any further, make sure you have gone through the tutorial that demonstrates [how you can enable inline image support in your chat app](../meeting-interop-features-inline-image.md). To summary, fetching images require a communication token in the request header. Upon getting 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 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.
230
230
231
-
Now you're familiar with how inline images work and it's easy to render image attachments just like a regular inline image.
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
-
Firstly, we inject an image tag to message content whenever there's an image attachment:
233
+
First, inject an `image` tag to message content whenever there's an image attachment:
234
234
235
235
```js
236
236
asyncfunctionrenderReceivedMessage(event) {
@@ -264,7 +264,7 @@ function renderImageAttachments(attachment) {
264
264
}
265
265
```
266
266
267
-
Now let's borrow `fetchPreviewImages()` from the [tutorial](../meeting-interop-features-inline-image.md) and we should be able to use it as is without any changes:
267
+
Now let's borrow `fetchPreviewImages()` from the [Tutorial: Enable Inline Image Support](../meeting-interop-features-inline-image.md), and use it as is without any changes:
268
268
269
269
```js
270
270
functionfetchPreviewImages(attachments) {
@@ -312,19 +312,19 @@ async function init() {
312
312
}
313
313
```
314
314
315
-
That's it! Now we have added image attachment support as well. Now let's run the code and see it in action!
315
+
Now you have image attachment support. Continue to run the code and see it in action.
316
316
317
317
318
318
## Image attachment demo
319
319
320
-
Now let's send some image attachments from Teams client like this:
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 shown a send box with an image attachment uploaded.":::
323
323
324
-
Upon sending the image attachment, you notice that it becomes an inline image on the Teams client side:
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 shown a message with the image attachment sent to the other participant.":::
327
327
328
-
Let's go back to our sample app, the same image should be rendered as well:
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 shown an incoming message with one inline image rendered.":::
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/chat-interop/meeting-interop-features-file-attachment.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ You should be aware of couple constraints that come with this feature:
30
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
31
3. 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 informtaion, 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`. 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).
34
34
35
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`.
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/chat-interop/meeting-interop-features-inline-image.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ The Chat SDK is designed to work with Microsoft Teams seamlessly. Specifically,
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, you need to refer to [this tutorial](./meeting-interop-features-file-attachment.md) to enable it as the part of the file sharing feature. (See the section "Handling Image Attachment.") 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 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.
22
22
23
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.
0 commit comments