diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md index 24b07bfa0a..3be86771be 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/events.md @@ -101,4 +101,16 @@ The [AttachmentRemoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion. {% highlight c# tabtitle="Attachment-remove.cs" %} {% include code-snippet/ai-assistview/events/attachment-remove/attachment-remove.cs %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## attachmentClick +The `AttachmentClick` event is triggered when an attached file is clicked in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachmentClick/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentClick.cs" %} +{% include code-snippet/ai-assistview/events/attachmentClick/attachmentClick.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md index 167f12cd95..c00ead0cd1 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/file-attachments.md @@ -74,4 +74,18 @@ You can use the  `MaxFileSize` property to allowed a maximum file size of the u {% endhighlight %} {% endtabs %} -![FileSize](images/file-size.png) \ No newline at end of file +![FileSize](images/file-size.png) + +### Setting maximum count +Restrict how many files can be attached at once using `MaximumCount` property. The default value is `10`. If users select more than the allowed count, the maximum count reached error will be displayed. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/maximumCount/razor %} +{% endhighlight %} +{% highlight c# tabtitle="MaximumCount.cs" %} +{% include code-snippet/ai-assistview/file-attachments/maximumCount/maximumCount.cs %} +{% endhighlight %} +{% endtabs %} + +![MaximumCount](images/maximumCount.png) diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md index dc8f196767..944a4ec37e 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/events.md @@ -80,4 +80,13 @@ The [AttachmentRemoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion. {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/ai-assistview/events/attachment-remove/tagHelper %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## attachmentClick +The `attachmentClick` event is triggered when an attached file is clicked in the AI AssistView. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/events/attachmentClick/tagHelper %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md index 14898923ac..edba8e152c 100644 --- a/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md +++ b/ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/file-attachments.md @@ -74,4 +74,18 @@ You can use the  `maxFileSize` property to allowed a maximum file size of the u {% endhighlight %} {% endtabs %} -![FileSize](images/file-size.png) \ No newline at end of file +![FileSize](images/file-size.png) + +### Setting maximum count +Restrict how many files can be attached at once using `maximumCount` property. The default value is `10`. If users select more than the allowed count, the maximum count reached error will be displayed. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/ai-assistview/file-attachments/maximumCount/razor %} +{% endhighlight %} +{% highlight c# tabtitle="MaximumCount.cs" %} +{% include code-snippet/ai-assistview/file-attachments/maximumCount/maximumCount.cs %} +{% endhighlight %} +{% endtabs %} + +![MaximumCount](images/maximumCount.png) diff --git a/ej2-asp-core-mvc/ai-assistview/images/maximumCount.png b/ej2-asp-core-mvc/ai-assistview/images/maximumCount.png new file mode 100644 index 0000000000..40fbbc50a6 Binary files /dev/null and b/ej2-asp-core-mvc/ai-assistview/images/maximumCount.png differ diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/events.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/events.md index 62bf716c3e..3aaaa95bf2 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/events.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/events.md @@ -50,3 +50,68 @@ The [UserTyping](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Int {% include code-snippet/chat-ui/events/userTyping/userTyping.cs %} {% endhighlight %} {% endtabs %} + +## Before attachment upload + +The `BeforeAttachmentUpload` event is triggered before attached files begin uploading in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/beforeAttachmentUpload/razor %} +{% endhighlight %} +{% highlight c# tabtitle="BeforeAttachmentUpload.cs" %} +{% include code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment upload success + +The `AttachmentUploadSuccess` event is triggered when an attached file is successfully uploaded in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentUploadSuccess/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentUploadSuccess.cs" %} +{% include code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment upload failure + +The `AttachmentUploadFailure` event is triggered when an attached file upload fails in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentUploadFailure/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentUploadFailure.cs" %} +{% include code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment removed + +The `AttachmentRemoved` event is triggered when an attached file is removed from the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentRemoved/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentRemoved.cs" %} +{% include code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment click + +The `AttachmentClick` event is triggered when an attached file is clicked in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentClick/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentClick.cs" %} +{% include code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/file-attachments.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/file-attachments.md new file mode 100644 index 0000000000..2568a59b3a --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/file-attachments.md @@ -0,0 +1,150 @@ +--- +layout: post +title: Attachments in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Attachments in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Chat UI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# File Attachments in ##Platform_Name## Chat UI control + +The Chat UI control supports message attachments, enabling users to upload and send files (images, documents, and more) alongside messages for richer, more contextual conversations. Enable this functionality using the `EnableAttachments` property and customize the behavior through the `AttachmentSettings` configuration. + +## Enable file attachments + +Enable file attachment support by setting the `EnableAttachments` property to `true`. By default, it is `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/enableAttachments/razor %} +{% endhighlight %} +{% highlight c# tabtitle="EnableAttachments.cs" %} +{% include code-snippet/chat-ui/file-attachments/enableAttachments/enableAttachments.cs %} +{% endhighlight %} +{% endtabs %} + +## Configure attachment settings + +Use the `AttachmentSettings` property to customize file attachment behavior, including upload endpoints, file type restrictions, and size limits. + +### Setting saveUrl and removeUrl + +Set the `SaveUrl` and `RemoveUrl` properties to specify server endpoints for handling file uploads and removals. The `SaveUrl` processes file uploads, while the `RemoveUrl` handles file deletion requests. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/save-remove-url/razor %} +{% endhighlight %} +{% highlight c# tabtitle="saveRemoveUrl.cs" %} +{% include code-snippet/chat-ui/file-attachments/save-remove-url/saveRemoveUrl.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting file type + +Use the `AllowedFileTypes` property to specify which file types users can upload. This property accepts file extensions (e.g., '.pdf', '.docx') or MIME types to control the types of files that can be attached. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/razor %} +{% endhighlight %} +{% highlight c# tabtitle="AllowedFileTypes.cs" %} +{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/allowedFileTypes.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting file size + +Configure the `MaxFileSize` property to define the maximum file size allowed for uploads. Specify the size in bytes. The default value is `30000000` bytes (approximately 30 MB). Files exceeding this limit will not be uploaded. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/maxFileSize/razor %} +{% endhighlight %} +{% highlight c# tabtitle="MaxFileSize.cs" %} +{% include code-snippet/chat-ui/file-attachments/maxFileSize/maxFileSize.cs %} +{% endhighlight %} +{% endtabs %} + +![MaxFileSize](images/maxFileSize.png) + +### Setting save format + +Control the format used to send files to the server using the `SaveFormat` property when path is not set. It does not change how files are uploaded. The default value is `Blob`. + + - `Blob`: Used for fast, memory‑efficient local previews. + - `Base64`: Reads the file as a Base64 data URL, useful when you need an inline data URL. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/saveFormat/razor %} +{% endhighlight %} +{% highlight c# tabtitle="SaveFormat.cs" %} +{% include code-snippet/chat-ui/file-attachments/saveFormat/saveFormat.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting server path + +The `Path` property to specifies the public base URL where uploaded files are (or will be) hosted. When set, it takes precedence over saveFormat. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/path/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Path.cs" %} +{% include code-snippet/chat-ui/file-attachments/path/path.cs %} +{% endhighlight %} +{% endtabs %} + +### Enabling drag-and-drop + +Toggle drag-and-drop support for attachments via `EnableDragAndDrop` property. The default value is `true`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/drag-and-drop/razor %} +{% endhighlight %} +{% highlight c# tabtitle="DragAndDrop.cs" %} +{% include code-snippet/chat-ui/file-attachments/drag-and-drop/dragAndDrop.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting maximum count + +Restrict how many files can be attached at once using `MaximumCount`. The default value is `10`. If users select more than the allowed count, the maxfileSize error will be displayed. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/maximumCount/razor %} +{% endhighlight %} +{% highlight c# tabtitle="MaximumCount.cs" %} +{% include code-snippet/chat-ui/file-attachments/maximumCount/maximumCount.cs %} +{% endhighlight %} +{% endtabs %} + +![MaximumCount](images/maximumCount.png) + +## Templates + +### Customizing the file preview + +Provide a custom UI for previewing selected files using `PreviewTemplate`. Use this to render thumbnails, filenames, progress, remove buttons, or any additional metadata prior to sending. + +### Customizing the attachments + +Control how attachments appear inside message bubbles with `AttachmentTemplate`. Use this to tailor the display of images, documents, or custom file types once the message is posted. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Template.cs" %} +{% include code-snippet/chat-ui/file-attachments/template/template.cs %} +{% endhighlight %} +{% endtabs %} + +![AttachmentTemplate](images/attachmentTemplate.png) +![PreviewTemplate](images/previewTemplate.png) diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md index ef24a7fcc6..5cb030c88b 100644 --- a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md @@ -50,3 +50,68 @@ The [userTyping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.In {% include code-snippet/chat-ui/events/userTyping/userTyping.cs %} {% endhighlight %} {% endtabs %} + +## Before attachment upload + +The `beforeAttachmentUpload` event is triggered before attached files begin uploading in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/beforeAttachmentUpload/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="BeforeAttachmentUpload.cs" %} +{% include code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment upload success + +The `attachmentUploadSuccess` event is triggered when an attached file is successfully uploaded in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentUploadSuccess/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentUploadSuccess.cs" %} +{% include code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment upload failure + +The `attachmentUploadFailure` event is triggered when an attached file upload fails in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentUploadFailure/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentUploadFailure.cs" %} +{% include code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment removed + +The `attachmentRemoved` event is triggered when an attached file is removed from the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentRemoved/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentRemoved.cs" %} +{% include code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs %} +{% endhighlight %} +{% endtabs %} + +## Attachment click + +The `attachmentClick` event is triggered when an attached file is clicked in the Chat UI. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/events/attachmentClick/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AttachmentClick.cs" %} +{% include code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/file-attachments.md b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/file-attachments.md new file mode 100644 index 0000000000..b5bb591955 --- /dev/null +++ b/ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/file-attachments.md @@ -0,0 +1,150 @@ +--- +layout: post +title: Attachments in ##Platform_Name## Chat UI Control | Syncfusion +description: Checkout and learn about Attachments in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Chat UI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# File Attachments in ##Platform_Name## Chat UI control + +The Chat UI control supports message attachments, enabling users to upload and send files (images, documents, and more) alongside messages for richer, more contextual conversations. Enable this functionality using the `enableAttachments` property and customize the behavior through the `attachmentSettings` configuration. + +## Enable file attachments + +Enable file attachment support by setting the `enableAttachments` property to `true`. By default, it is `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/enableAttachments/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="EnableAttachments.cs" %} +{% include code-snippet/chat-ui/file-attachments/enableAttachments/enableAttachments.cs %} +{% endhighlight %} +{% endtabs %} + +## Configure attachment settings + +Use the `e-chatui-attachmentsettings` tag directive to customize file attachment behavior, including upload endpoints, file type restrictions, and size limits. + +### Setting saveUrl and removeUrl + +Set the `saveUrl` and `removeUrl` properties to specify server endpoints for handling file uploads and removals. The `saveUrl` processes file uploads, while the `removeUrl` handles file deletion requests. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/save-remove-url/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="saveRemoveUrl.cs" %} +{% include code-snippet/chat-ui/file-attachments/save-remove-url/saveRemoveUrl.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting file type + +Use the `allowedFileTypes` property to specify which file types users can upload. This property accepts file extensions (e.g., '.pdf', '.docx') or MIME types to control the types of files that can be attached. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AllowedFileTypes.cs" %} +{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/allowedFileTypes.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting file size + +Configure the `maxFileSize` property to define the maximum file size allowed for uploads. Specify the size in bytes. The default value is `30000000` bytes (approximately 30 MB). Files exceeding this limit will not be uploaded. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/maxFileSize/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="MaxFileSize.cs" %} +{% include code-snippet/chat-ui/file-attachments/maxFileSize/maxFileSize.cs %} +{% endhighlight %} +{% endtabs %} + +![MaxFileSize](images/maxFileSize.png) + +### Setting save format + +Control the format used to send files to the server using the `saveFormat` property when path is not set. It does not change how files are uploaded. The default value is `Blob`. + + - `Blob`: Used for fast, memory‑efficient local previews. + - `Base64`: Reads the file as a Base64 data URL, useful when you need an inline data URL. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/saveFormat/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="SaveFormat.cs" %} +{% include code-snippet/chat-ui/file-attachments/saveFormat/saveFormat.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting server path + +The `path` property to specifies the public base URL where uploaded files are (or will be) hosted. When set, it takes precedence over saveFormat. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/path/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Path.cs" %} +{% include code-snippet/chat-ui/file-attachments/path/path.cs %} +{% endhighlight %} +{% endtabs %} + +### Enabling drag-and-drop + +Toggle drag-and-drop support for attachments via `enableDragAndDrop` property. The default value is `true`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/drag-and-drop/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="DragAndDrop.cs" %} +{% include code-snippet/chat-ui/file-attachments/drag-and-drop/dragAndDrop.cs %} +{% endhighlight %} +{% endtabs %} + +### Setting maximum count + +Restrict how many files can be attached at once using `maximumCount`. The default value is `10`. If users select more than the allowed count, the maxfileSize error will be displayed. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/maximumCount/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="MaximumCount.cs" %} +{% include code-snippet/chat-ui/file-attachments/maximumCount/maximumCount.cs %} +{% endhighlight %} +{% endtabs %} + +![MaximumCount](images/maximumCount.png) + +## Templates + +### Customizing the file preview + +Provide a custom UI for previewing selected files using `previewTemplate`. Use this to render thumbnails, filenames, progress, remove buttons, or any additional metadata prior to sending. + +### Customizing the attachments + +Control how attachments appear inside message bubbles with `attachmentTemplate`. Use this to tailor the display of images, documents, or custom file types once the message is posted. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chat-ui/file-attachments/template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Template.cs" %} +{% include code-snippet/chat-ui/file-attachments/template/template.cs %} +{% endhighlight %} +{% endtabs %} + +![AttachmentTemplate](images/attachmentTemplate.png) +![PreviewTemplate](images/previewTemplate.png) diff --git a/ej2-asp-core-mvc/chat-ui/images/attachmentTemplate.png b/ej2-asp-core-mvc/chat-ui/images/attachmentTemplate.png new file mode 100644 index 0000000000..14b22f5902 Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/attachmentTemplate.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/maxFileSize.png b/ej2-asp-core-mvc/chat-ui/images/maxFileSize.png new file mode 100644 index 0000000000..720dcfa30c Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/maxFileSize.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/maximumCount.png b/ej2-asp-core-mvc/chat-ui/images/maximumCount.png new file mode 100644 index 0000000000..c918663e1b Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/maximumCount.png differ diff --git a/ej2-asp-core-mvc/chat-ui/images/previewTemplate.png b/ej2-asp-core-mvc/chat-ui/images/previewTemplate.png new file mode 100644 index 0000000000..6b7b64db9b Binary files /dev/null and b/ej2-asp-core-mvc/chat-ui/images/previewTemplate.png differ diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/attachmentClick.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/attachmentClick.cs new file mode 100644 index 0000000000..a68b880892 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/attachmentClick.cs @@ -0,0 +1,4 @@ +public ActionResult AttachmentClick() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/razor new file mode 100644 index 0000000000..008cc48591 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/razor @@ -0,0 +1,21 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), AttachmentClick = "attachmentClick" }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/tagHelper new file mode 100644 index 0000000000..07b4ca2164 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/events/attachmentClick/tagHelper @@ -0,0 +1,23 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/maximumCount.cs b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/maximumCount.cs new file mode 100644 index 0000000000..62a214d44f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/maximumCount.cs @@ -0,0 +1,4 @@ +public ActionResult MaximumCount() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/razor b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/razor new file mode 100644 index 0000000000..1581b8d321 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/razor @@ -0,0 +1,18 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().AIAssistView("aiAssistView").EnableAttachments(true).PromptRequest("onPromptRequest").Created("onCreated").AttachmentSettings(new AIAssistViewAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), MaximumCount = 5 }).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/tagHelper b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/tagHelper new file mode 100644 index 0000000000..e3302a93ba --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ai-assistview/file-attachments/maximumCount/tagHelper @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs new file mode 100644 index 0000000000..c2a4a9e5e0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult AttachmentClick() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/razor new file mode 100644 index 0000000000..541a6aabd0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove"), AttachmentClick = "attachmentClick" }).User(ViewBag.CurrentUser).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/tagHelper new file mode 100644 index 0000000000..b7f49aed90 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentClick/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs new file mode 100644 index 0000000000..bfae99c9be --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult AttachmentRemoved() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/razor new file mode 100644 index 0000000000..89eddaad29 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentRemoved("attachmentRemoved").User(ViewBag.CurrentUser).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/tagHelper new file mode 100644 index 0000000000..208cef6f02 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentRemoved/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs new file mode 100644 index 0000000000..182dbb5fd4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult AttachmentUploadFailure() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/razor new file mode 100644 index 0000000000..7506af7911 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentUploadFailure("attachmentUploadFailure").User(ViewBag.CurrentUser).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/tagHelper new file mode 100644 index 0000000000..d0ba27de08 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadFailure/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs new file mode 100644 index 0000000000..85bc48a209 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult AttachmentUploadSuccess() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/razor new file mode 100644 index 0000000000..0d93041221 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).AttachmentUploadSuccess("attachmentUploadSuccess").User(ViewBag.CurrentUser).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/tagHelper new file mode 100644 index 0000000000..373f0b4d8e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/attachmentUploadSuccess/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs new file mode 100644 index 0000000000..5ffa23237e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult BeforeAttachmentUpload() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/razor new file mode 100644 index 0000000000..3a0f9ab9c8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.InteractiveChat + +
+ @Html.EJS().ChatUI("chatUser").EnableAttachments(true).AttachmentSettings(new ChatUIFileAttachmentSettings() { SaveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save"), RemoveUrl = @Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove") }).BeforeAttachmentUpload("beforeAttachmentUpload").User(ViewBag.CurrentUser).Render() +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/tagHelper new file mode 100644 index 0000000000..0d2bc059da --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/beforeAttachmentUpload/tagHelper @@ -0,0 +1,14 @@ +@using Syncfusion.EJ2.InteractiveChat; + +
+ + + + +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/created.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/created.cs index 757eaf59ee..38b1d5d7f3 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/created.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/created.cs @@ -1,4 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + public ActionResult Created() { + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/razor index 0afdf0c897..c54821e804 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/razor +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/events/created/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.InteractiveChat
- @Html.EJS().ChatUI("chatUser").Created("onCreated").Render() + @Html.EJS().ChatUI("chatUser").Created("onCreated").User(ViewBag.CurrentUser).Render()
+ + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/tagHelper new file mode 100644 index 0000000000..f7a9419ed8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/tagHelper @@ -0,0 +1,213 @@ +@using Syncfusion.EJ2.InteractiveChat; +
+ + + + + +
+ + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/template.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/template.cs new file mode 100644 index 0000000000..5e30717c44 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/file-attachments/template/template.cs @@ -0,0 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + +public ActionResult Template() +{ + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/gettingstarted.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/gettingstarted.cs index aa9ed51b46..20f9d119b9 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/gettingstarted.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/gettingstarted.cs @@ -1,4 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + public ActionResult Default() { + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/razor index 6bf0564826..4f28512f04 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/razor +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/razor @@ -1,5 +1,5 @@ @using Syncfusion.EJ2.InteractiveChat
- @Html.EJS().ChatUI("chatUI").Render() + @Html.EJS().ChatUI("chatUI").User(ViewBag.CurrentUser).Render()
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/tagHelper b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/tagHelper index 87187bc288..59673c56eb 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/getting-started/tagHelper @@ -1,5 +1,7 @@ @using Syncfusion.EJ2.InteractiveChat;
- + + +
diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/defaultMessages.cs b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/defaultMessages.cs index 24a4d2032f..beb7eb6a55 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/defaultMessages.cs +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/defaultMessages.cs @@ -1,4 +1,11 @@ +using Syncfusion.EJ2.InteractiveChat; + +public ChatUIUser CurrentUser { get; set; } +public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" }; + public ActionResult EmptyChatTemplate() { + CurrentUser = CurrentUserModel; + ViewBag.CurrentUser = CurrentUser; return View(); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor index df3f02c873..2e9c9349b8 100644 --- a/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor +++ b/ej2-asp-core-mvc/code-snippet/chat-ui/templates/emptyChatTemplate/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.InteractiveChat;
- @Html.EJS().ChatUI("chatUser").EmptyChatTemplate("#emptyChatContent").Render() + @Html.EJS().ChatUI("chatUser").EmptyChatTemplate("#emptyChatContent").User(ViewBag.CurrentUser).Render()