Skip to content

Commit f4f730f

Browse files
SenthilarasuBaluSenthilarasuBalu
committed
998699: file attachment ug
1 parent 081216e commit f4f730f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1300
-10
lines changed

‎ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/events.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,68 @@ The [UserTyping](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Int
5050
{% include code-snippet/chat-ui/events/userTyping/userTyping.cs %}
5151
{% endhighlight %}
5252
{% endtabs %}
53+
54+
## Before attachment upload
55+
56+
The `BeforeAttachmentUpload` event is triggered before attached files begin uploading in the Chat UI.
57+
58+
{% tabs %}
59+
{% highlight razor tabtitle="CSHTML" %}
60+
{% include code-snippet/chat-ui/events/beforeAttachmentUpload/razor %}
61+
{% endhighlight %}
62+
{% highlight c# tabtitle="BeforeAttachmentUpload.cs" %}
63+
{% include code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs %}
64+
{% endhighlight %}
65+
{% endtabs %}
66+
67+
## Attachment upload success
68+
69+
The `AttachmentUploadSuccess` event is triggered when an attached file is successfully uploaded in the Chat UI.
70+
71+
{% tabs %}
72+
{% highlight razor tabtitle="CSHTML" %}
73+
{% include code-snippet/chat-ui/events/attachmentUploadSuccess/razor %}
74+
{% endhighlight %}
75+
{% highlight c# tabtitle="AttachmentUploadSuccess.cs" %}
76+
{% include code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs %}
77+
{% endhighlight %}
78+
{% endtabs %}
79+
80+
## Attachment upload failure
81+
82+
The `AttachmentUploadFailure` event is triggered when an attached file upload fails in the Chat UI.
83+
84+
{% tabs %}
85+
{% highlight razor tabtitle="CSHTML" %}
86+
{% include code-snippet/chat-ui/events/attachmentUploadFailure/razor %}
87+
{% endhighlight %}
88+
{% highlight c# tabtitle="AttachmentUploadFailure.cs" %}
89+
{% include code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs %}
90+
{% endhighlight %}
91+
{% endtabs %}
92+
93+
## Attachment removed
94+
95+
The `AttachmentRemoved` event is triggered when an attached file is removed from the Chat UI.
96+
97+
{% tabs %}
98+
{% highlight razor tabtitle="CSHTML" %}
99+
{% include code-snippet/chat-ui/events/attachmentRemoved/razor %}
100+
{% endhighlight %}
101+
{% highlight c# tabtitle="AttachmentRemoved.cs" %}
102+
{% include code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs %}
103+
{% endhighlight %}
104+
{% endtabs %}
105+
106+
## Attachment click
107+
108+
The `AttachmentClick` event is triggered when an attached file is clicked in the Chat UI.
109+
110+
{% tabs %}
111+
{% highlight razor tabtitle="CSHTML" %}
112+
{% include code-snippet/chat-ui/events/attachmentClick/razor %}
113+
{% endhighlight %}
114+
{% highlight c# tabtitle="AttachmentClick.cs" %}
115+
{% include code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs %}
116+
{% endhighlight %}
117+
{% endtabs %}

‎ej2-asp-core-mvc/chat-ui/EJ2_ASP.MVC/file-attachments.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
layout: post
3+
title: Attachments in ##Platform_Name## Chat UI Control | Syncfusion
4+
description: Checkout and learn about Attachments in Syncfusion ##Platform_Name## Chat UI control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Chat UI
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# File Attachments in ##Platform_Name## Chat UI control
12+
13+
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.
14+
15+
## Enable file attachments
16+
17+
Enable file attachment support by setting the `EnableAttachments` property to `true`. By default, it is `false`.
18+
19+
{% tabs %}
20+
{% highlight razor tabtitle="CSHTML" %}
21+
{% include code-snippet/chat-ui/file-attachments/enableAttachments/razor %}
22+
{% endhighlight %}
23+
{% highlight c# tabtitle="EnableAttachments.cs" %}
24+
{% include code-snippet/chat-ui/file-attachments/enableAttachments/enableAttachments.cs %}
25+
{% endhighlight %}
26+
{% endtabs %}
27+
28+
## Configure attachment settings
29+
30+
Use the `AttachmentSettings` property to customize file attachment behavior, including upload endpoints, file type restrictions, and size limits.
31+
32+
### Setting saveUrl and removeUrl
33+
34+
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.
35+
36+
{% tabs %}
37+
{% highlight razor tabtitle="CSHTML" %}
38+
{% include code-snippet/chat-ui/file-attachments/save-remove-url/razor %}
39+
{% endhighlight %}
40+
{% highlight c# tabtitle="saveRemoveUrl.cs" %}
41+
{% include code-snippet/chat-ui/file-attachments/save-remove-url/save-remove-url.cs %}
42+
{% endhighlight %}
43+
{% endtabs %}
44+
45+
### Setting file type
46+
47+
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.
48+
49+
{% tabs %}
50+
{% highlight razor tabtitle="CSHTML" %}
51+
{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/razor %}
52+
{% endhighlight %}
53+
{% highlight c# tabtitle="AllowedFileTypes.cs" %}
54+
{% include code-snippet/chat-ui/file-attachments/allowedFileTypes/allowedFileTypes.cs %}
55+
{% endhighlight %}
56+
{% endtabs %}
57+
58+
### Setting file size
59+
60+
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.
61+
62+
{% tabs %}
63+
{% highlight razor tabtitle="CSHTML" %}
64+
{% include code-snippet/chat-ui/file-attachments/maxFileSize/razor %}
65+
{% endhighlight %}
66+
{% highlight c# tabtitle="MaxFileSize.cs" %}
67+
{% include code-snippet/chat-ui/file-attachments/maxFileSize/maxFileSize.cs %}
68+
{% endhighlight %}
69+
{% endtabs %}
70+
71+
![MaxFileSize](images/maxFileSize.png)
72+
73+
### Setting save format
74+
75+
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`.
76+
77+
- `Blob`: Used for fast, memory‑efficient local previews.
78+
- `Base64`: Reads the file as a Base64 data URL, useful when you need an inline data URL.
79+
80+
{% tabs %}
81+
{% highlight razor tabtitle="CSHTML" %}
82+
{% include code-snippet/chat-ui/file-attachments/saveFormat/razor %}
83+
{% endhighlight %}
84+
{% highlight c# tabtitle="SaveFormat.cs" %}
85+
{% include code-snippet/chat-ui/file-attachments/saveFormat/saveFormat.cs %}
86+
{% endhighlight %}
87+
{% endtabs %}
88+
89+
### Setting server path
90+
91+
The `Path` property to specifies the public base URL where uploaded files are (or will be) hosted. When set, it takes precedence over saveFormat.
92+
93+
{% tabs %}
94+
{% highlight razor tabtitle="CSHTML" %}
95+
{% include code-snippet/chat-ui/file-attachments/path/razor %}
96+
{% endhighlight %}
97+
{% highlight c# tabtitle="Path.cs" %}
98+
{% include code-snippet/chat-ui/file-attachments/path/path.cs %}
99+
{% endhighlight %}
100+
{% endtabs %}
101+
102+
### Enabling drag-and-drop
103+
104+
Toggle drag-and-drop support for attachments via `EnableDragAndDrop` property. The default value is `true`.
105+
106+
{% tabs %}
107+
{% highlight razor tabtitle="CSHTML" %}
108+
{% include code-snippet/chat-ui/file-attachments/drag-and-drop/razor %}
109+
{% endhighlight %}
110+
{% highlight c# tabtitle="DragAndDrop.cs" %}
111+
{% include code-snippet/chat-ui/file-attachments/drag-and-drop/drag-and-drop.cs %}
112+
{% endhighlight %}
113+
{% endtabs %}
114+
115+
### Setting maximum count
116+
117+
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.
118+
119+
{% tabs %}
120+
{% highlight razor tabtitle="CSHTML" %}
121+
{% include code-snippet/chat-ui/file-attachments/maximumCount/razor %}
122+
{% endhighlight %}
123+
{% highlight c# tabtitle="MaximumCount.cs" %}
124+
{% include code-snippet/chat-ui/file-attachments/maximumCount/maximumCount.cs %}
125+
{% endhighlight %}
126+
{% endtabs %}
127+
128+
![MaximumCount](images/maximumCount.png)
129+
130+
## Templates
131+
132+
### Customizing the file preview
133+
134+
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.
135+
136+
### Customizing the attachments
137+
138+
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.
139+
140+
{% tabs %}
141+
{% highlight razor tabtitle="CSHTML" %}
142+
{% include code-snippet/chat-ui/file-attachments/template/razor %}
143+
{% endhighlight %}
144+
{% highlight c# tabtitle="Template.cs" %}
145+
{% include code-snippet/chat-ui/file-attachments/template/template.cs %}
146+
{% endhighlight %}
147+
{% endtabs %}
148+
149+
![AttachmentTemplate](images/attachmentTemplate.png)
150+
![PreviewTemplate](images/previewTemplate.png)

‎ej2-asp-core-mvc/chat-ui/EJ2_ASP.NETCORE/events.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,68 @@ The [userTyping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.In
5050
{% include code-snippet/chat-ui/events/userTyping/userTyping.cs %}
5151
{% endhighlight %}
5252
{% endtabs %}
53+
54+
## Before attachment upload
55+
56+
The `beforeAttachmentUpload` event is triggered before attached files begin uploading in the Chat UI.
57+
58+
{% tabs %}
59+
{% highlight razor tabtitle="CSHTML" %}
60+
{% include code-snippet/chat-ui/events/beforeAttachmentUpload/tagHelper %}
61+
{% endhighlight %}
62+
{% highlight c# tabtitle="BeforeAttachmentUpload.cs" %}
63+
{% include code-snippet/chat-ui/events/beforeAttachmentUpload/beforeAttachmentUpload.cs %}
64+
{% endhighlight %}
65+
{% endtabs %}
66+
67+
## Attachment upload success
68+
69+
The `attachmentUploadSuccess` event is triggered when an attached file is successfully uploaded in the Chat UI.
70+
71+
{% tabs %}
72+
{% highlight razor tabtitle="CSHTML" %}
73+
{% include code-snippet/chat-ui/events/attachmentUploadSuccess/tagHelper %}
74+
{% endhighlight %}
75+
{% highlight c# tabtitle="AttachmentUploadSuccess.cs" %}
76+
{% include code-snippet/chat-ui/events/attachmentUploadSuccess/attachmentUploadSuccess.cs %}
77+
{% endhighlight %}
78+
{% endtabs %}
79+
80+
## Attachment upload failure
81+
82+
The `attachmentUploadFailure` event is triggered when an attached file upload fails in the Chat UI.
83+
84+
{% tabs %}
85+
{% highlight razor tabtitle="CSHTML" %}
86+
{% include code-snippet/chat-ui/events/attachmentUploadFailure/tagHelper %}
87+
{% endhighlight %}
88+
{% highlight c# tabtitle="AttachmentUploadFailure.cs" %}
89+
{% include code-snippet/chat-ui/events/attachmentUploadFailure/attachmentUploadFailure.cs %}
90+
{% endhighlight %}
91+
{% endtabs %}
92+
93+
## Attachment removed
94+
95+
The `attachmentRemoved` event is triggered when an attached file is removed from the Chat UI.
96+
97+
{% tabs %}
98+
{% highlight razor tabtitle="CSHTML" %}
99+
{% include code-snippet/chat-ui/events/attachmentRemoved/tagHelper %}
100+
{% endhighlight %}
101+
{% highlight c# tabtitle="AttachmentRemoved.cs" %}
102+
{% include code-snippet/chat-ui/events/attachmentRemoved/attachmentRemoved.cs %}
103+
{% endhighlight %}
104+
{% endtabs %}
105+
106+
## Attachment click
107+
108+
The `attachmentClick` event is triggered when an attached file is clicked in the Chat UI.
109+
110+
{% tabs %}
111+
{% highlight razor tabtitle="CSHTML" %}
112+
{% include code-snippet/chat-ui/events/attachmentClick/tagHelper %}
113+
{% endhighlight %}
114+
{% highlight c# tabtitle="AttachmentClick.cs" %}
115+
{% include code-snippet/chat-ui/events/attachmentClick/attachmentClick.cs %}
116+
{% endhighlight %}
117+
{% endtabs %}

0 commit comments

Comments
 (0)