Uploaded Image Preview (Base64)
+* The remove action is optional, one can handle the removed files from server. + -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +## Created Event -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. + +### Code Example + +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task
@statusMessage
+@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} -@validationMessage
+ @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} -Uploaded Image Preview (Base64)
+* The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task
@statusMessage
+@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} -@validationMessage
+ @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## OnFileListRender -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} -Register Syncfusion® Blazor Service
Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} -{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} +{% highlight C# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %} ... ... @@ -190,7 +190,7 @@ var app = builder.Build(); .... {% endhighlight %} -{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %} +{% highlight C# tabtitle="Client (~/Program.cs)" hl_lines="2 5" %} ... using Syncfusion.Blazor; @@ -203,7 +203,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -217,16 +217,20 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - //Blazor File Upload Component script reference. - + + ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor File Upload component +## Add Syncfusion® Blazor File Upload component -Add the Syncfusion® Blazor File Upload component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +The Syncfusion Blazor File Upload component allows you to seamlessly integrate file upload functionalities into your Blazor applications. It supports various features like asynchronous and synchronous uploads, file type validation, progress tracking, and custom templates. A common use case is enabling users to upload documents, images, or other files to a server, or process them directly within the client-side application. + +### Simple Code to render a Usable File Upload Component + +The most basic way to render the File Upload component is by adding the `Uploaded Image Preview (Base64)
+* The remove action is optional, one can handle the removed files from server. +## Created Event -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event fires after the File Upload component has been rendered and initialized. This event is a good place to perform any initial setup, attach custom event listeners to the component's DOM elements, or apply custom styling that requires the component to be fully rendered. -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +### Code Example -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +This example shows how to use the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event to add a custom message or dynamically change some aspect of the uploader's appearance right after it's created. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} -[Route("api/[controller]")] -public class SampleDataController : Controller -{ - public string uploads = ".\\Uploaded Files"; // replace with your directory path +@using Syncfusion.Blazor.Inputs - [HttpPost("[action]")] - public async Task
@statusMessage
+@code { + private string statusMessage = "Uploader not yet created."; - [HttpPost("[action]")] - public void Remove(string UploadFiles) // Delete the uploaded file here + private void OnUploaderCreated() { - if(UploadFiles != null) - { - var filePath = Path.Combine(uploads, UploadFiles); - if (System.IO.File.Exists(filePath)) - { - //Delete the file from server - System.IO.File.Delete(filePath); - } - } + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } } {% endhighlight %} {% endtabs %} -The [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure) event is triggered when there is a failure in the AJAX request during the uploading or removing of files. It provides a way to handle and respond to any errors or issues that occur during the file upload or removal process. +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} {% highlight razor %} -@validationMessage
+ @code { - private void OnFailureHandler(FailureEventArgs args) - { - // Here, you can customize your code. - } - private void OnActionCompleteHandler(ActionCompleteEventArgs args) + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB + + private void OnFileSelected(SelectedEventArgs args) { - // Here, you can customize your code. + validationMessage = ""; + foreach (var file in args.FilesData) + { + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); + } } } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} -* The remove action is optional, one can handle the removed files from server. +This example demonstrates how to read the content of an uploaded file into a [MemoryStream Class](https://learn.microsoft.com/en-us/dotnet/api/system.io.memorystream)`. This allows you to perform in-memory operations on the file, such as converting an image to a Base64 string, without requiring disk I/O. -The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property. - -The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon. +{% tabs %} +{% highlight razor %} -The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property. [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnActionComplete) event triggers after all the selected files have been processed to upload successfully or failed to server. +@using Syncfusion.Blazor.Inputs +@using System.IO -{% tabs %} -{% highlight cshtml %} +
Uploaded Image Preview (Base64)
+@statusMessage
- // for File Data - try - { - // Example: Retrieve file path for stream.txt - var filePath = "stream.txt"; // Example file path - - var fullPath = Path.GetFullPath(filePath); +@code { + private string statusMessage = "Uploader not yet created."; - // Return the file - return PhysicalFile(fullPath, "text/plain"); - } - catch (Exception e) + private void OnUploaderCreated() { - return Content("Failed to retrieve file response: " + e.Message, "text/plain"); + statusMessage = "Syncfusion File Uploader has been successfully created and initialized!"; + Console.WriteLine(statusMessage); + // You could also interact with JavaScript to modify DOM here if needed. + // For example: JSRuntime.InvokeVoidAsync("someJsFunction"); } - } {% endhighlight %} {% endtabs %} -### Client-side configuration for saving and returning responses +N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features. -The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## File Selected Event + +The [`FileSelected Event`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected)event is triggered when files are chosen from the file explorer dialog, but **before** the [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event. This event provides an opportunity to perform validations on the selected files (e.g., file size, type, count) and decide whether to proceed with the upload/value change or cancel the selection. It's ideal for immediate client-side feedback or preventative actions. + +### Code Example + +This example demonstrates how to use the [FileSelected Event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected) event to prevent files larger than a certain size. {% tabs %} -{% highlight cshtml %} +{% highlight razor %} @using Syncfusion.Blazor.Inputs -@using System.Text.Json +@using System.Linq - -@validationMessage
@code { + private string validationMessage = ""; + private readonly long MaxFileSize = 1024 * 1024; // 1 MB - private void OnSuccessHandler(SuccessEventArgs args) + private void OnFileSelected(SelectedEventArgs args) { - if (args.Response is not null) // Check if the event argument is not null + validationMessage = ""; + foreach (var file in args.FilesData) { - var responseText = args.Response.ResponseText; - if (!string.IsNullOrWhiteSpace(responseText)) - { - // for JSON and File Datas - using var jsonDoc = JsonDocument.Parse(responseText); - var jsonResponse = jsonDoc.RootElement; - - if (jsonResponse.TryGetProperty("success", out var successProp)) - { - var isSuccess = successProp.GetBoolean(); - - if (isSuccess) - { - // File upload success - var message = jsonResponse.TryGetProperty("message", out var messageProp) ? messageProp.GetString() : "File uploaded successfully"; - - // Additional processing as needed - } - } - - - // for string Data - var message = responseText; - // Additional processing as needed - } + if (file.Size > MaxFileSize) + { + validationMessage += $"Error: File '{file.Name}' exceeds {MaxFileSize / (1024 * 1024)} MB limit. "; + args.Cancel = true; // Prevents this file from being added + } + } + if (!string.IsNullOrEmpty(validationMessage)) + { + Console.WriteLine(validationMessage); + } + else + { + Console.WriteLine("Files selected successfully and passed initial validation."); } } - } {% endhighlight %} {% endtabs %} -## Configure allowed file types +N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity. -You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + + +## OnFileListRender + +The [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) event allows you to customize individual file list items before they are rendered in the uploader's UI. This is highly useful for scenarios where you need to display additional information alongside each file, such as a custom preview, metadata, or actions. + +### Code Example + +This example demonstrates how to use [`OnFileListRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFileListRender) {% tabs %} {% highlight razor %} -
+ Hue
+ Exposure
+ Blur
+ Opacity
+
+
+
+ Fit Width
+ Fit Height
+
+@code {
+ SfImageEditor ImageEditor;
+ private async void OpenAsync()
+ {
+ await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
+ }
+ private async void FitWidth()
+ {
+ await ImageEditor.ZoomAsync(1); // Reset zoom to original size before applying Fit Width
+ ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+ double ContainerWidth = Convert.ToDouble(ImageEditor.Width);
+ if (Dimension is not null)
+ {
+ double ImageWidth = Dimension.Width;
+ double OldWidth = Dimension.Width;
+ double ZoomFactor = 0.1;
+ double NewZoom;
+ NewZoom = 1;
+ while (ImageWidth < ContainerWidth)
+ {
+ NewZoom++;
+ ImageWidth = OldWidth + (OldWidth * ZoomFactor);
+ ZoomFactor += 0.1;
+ }
+ await ImageEditor.ZoomAsync(NewZoom);
+ }
+ }
+ private async void FitHeight()
+ {
+ await ImageEditor.ZoomAsync(1); // Reset zoom to original size before applying Fit Height
+ ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+ double ContainerHeight = Convert.ToDouble(ImageEditor.Height);
+ if (Dimension is not null)
+ {
+ double ImageHeight = Dimension.Height;
+ double OldHeight = Dimension.Height;
+ double ZoomFactor = 0.1;
+ double NewZoom = 1;
+ while (ImageHeight < ContainerHeight)
+ {
+ NewZoom++;
+ ImageHeight = OldHeight + (OldHeight * ZoomFactor);
+ ZoomFactor += 0.1;
+ }
+ await ImageEditor.ZoomAsync(NewZoom);
+ }
+ }
+}
+```
+
+
\ No newline at end of file
diff --git a/blazor/image-editor/how-to/reset.md b/blazor/image-editor/how-to/reset.md
index d8b385126c..5891d76c55 100644
--- a/blazor/image-editor/how-to/reset.md
+++ b/blazor/image-editor/how-to/reset.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Reset an Image with Blazor Image Editor Component | Syncfusion
-description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+title: Reset an image in the Blazor Image Editor | Syncfusion
+description: Learn how to reset an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
@@ -9,6 +9,6 @@ documentation: ug
# Reset an image in the Blazor Image Editor component
-The [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image.
+The [ResetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all changes made to an image and revert it to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and a return to the original, unmodified version is required.
-By invoking the `ResetAsync` method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image.
\ No newline at end of file
+Invoking the `ResetAsync` method discards all modifications and restores the image to its initial state, enabling a clean restart of the editing process.
\ No newline at end of file
diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md
index 37adfee207..efe53d636f 100644
--- a/blazor/image-editor/image-restrictions.md
+++ b/blazor/image-editor/image-restrictions.md
@@ -1,7 +1,7 @@
---
layout: post
title: Image Restrictions with Blazor Image Editor Component | Syncfusion
-description: Checkout the Image Restrictions available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
@@ -9,15 +9,15 @@ documentation: ug
# Image Restrictions in the Blazor Image Editor component
-The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience.
+The Image Editor supports restricting image uploads by file extension and by minimum and maximum file size using the [ImageEditorUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. When an uploaded image does not meet the configured criteria, the component displays an alert to guide the end user and maintain a smooth workflow.
-`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions.
+Note: File restrictions apply when opening images via the open method or the built-in uploader. If upload settings are not defined, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions, with no file size restrictions.
## Allowed image extensions
-The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`, `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions.
+Configure allowed file extensions for uploaded images using the [ImageEditorUploadSettings.AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property. This ensures that only supported formats—such as .jpg, .png, .svg, .webp, and .bmp—are processed, improving compatibility and preventing errors caused by unsupported file types. By default, the Image Editor allows .jpg, .png, .svg, .webp, and .bmp.
-`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string.
+Note: Specify allowed extensions as a comma-separated string, for example: '.jpg, .svg'.
Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property.
@@ -46,9 +46,9 @@ Here is an example of configuring image restrictions using the `ImageEditorUploa
## Minimum and maximum image size
-The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed.
+Set minimum and maximum upload size limits using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. These constraints enforce consistent input and prevent oversized or undersized files from being processed.
-`Note:` Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply.
+Note: When images are uploaded as base64 strings, file extension validation is bypassed; file size restrictions still apply.
Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property.
diff --git a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg
index d3fac69d34..89e0e753a6 100644
Binary files a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg and b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg
index a4c7054275..7f9547315e 100644
Binary files a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg
index 0551f2a81c..95a1173f43 100644
Binary files a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-filter.jpg b/blazor/image-editor/images/blazor-image-editor-filter.jpg
index 95ce80ddd8..c060cc35e4 100644
Binary files a/blazor/image-editor/images/blazor-image-editor-filter.jpg and b/blazor/image-editor/images/blazor-image-editor-filter.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg
new file mode 100644
index 0000000000..db32269942
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-blur.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg
new file mode 100644
index 0000000000..2c6925dc90
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-finetune-saturation.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-finetune.jpg b/blazor/image-editor/images/blazor-image-editor-finetune.jpg
deleted file mode 100644
index 0b43d5c60f..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-finetune.jpg and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg b/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg
new file mode 100644
index 0000000000..dd184694a1
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-fit-to-width-and-height.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-frame.jpg b/blazor/image-editor/images/blazor-image-editor-frame.jpg
new file mode 100644
index 0000000000..a3fc817954
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-frame.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-frame.png b/blazor/image-editor/images/blazor-image-editor-frame.png
deleted file mode 100644
index 557e1cafa4..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-frame.png and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg
new file mode 100644
index 0000000000..cb227691e9
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png
deleted file mode 100644
index 3bccbdb8bc..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-redact.jpg b/blazor/image-editor/images/blazor-image-editor-redact.jpg
new file mode 100644
index 0000000000..64de0991ec
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-redact.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-redact.png b/blazor/image-editor/images/blazor-image-editor-redact.png
deleted file mode 100644
index e2b20c0982..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-redact.png and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-resize.jpg b/blazor/image-editor/images/blazor-image-editor-resize.jpg
new file mode 100644
index 0000000000..7ae9df6a9c
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-resize.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-resize.png b/blazor/image-editor/images/blazor-image-editor-resize.png
deleted file mode 100644
index cc0ea39490..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-resize.png and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg
new file mode 100644
index 0000000000..315d29b056
Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg differ
diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.png b/blazor/image-editor/images/blazor-image-editor-undo-redo.png
deleted file mode 100644
index 61da88b7f6..0000000000
Binary files a/blazor/image-editor/images/blazor-image-editor-undo-redo.png and /dev/null differ
diff --git a/blazor/image-editor/images/blazor-image-editor-z-order.jpg b/blazor/image-editor/images/blazor-image-editor-z-order.jpg
index dc79249e53..c5942a8d6c 100644
Binary files a/blazor/image-editor/images/blazor-image-editor-z-order.jpg and b/blazor/image-editor/images/blazor-image-editor-z-order.jpg differ
diff --git a/blazor/image-editor/localization.md b/blazor/image-editor/localization.md
index 32b91c70a1..bad0747e6b 100644
--- a/blazor/image-editor/localization.md
+++ b/blazor/image-editor/localization.md
@@ -1,15 +1,14 @@
---
layout: post
title: Localization with Blazor Image Editor Component | Syncfusion
-description: Checkout the Localization available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---
-
# Localization in the Blazor Image Editor component
-[Blazor Image editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components.
+The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components.
-N> You can also explore our [Blazor Image editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to know how to render and configure the image editor.
\ No newline at end of file
+N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor.
\ No newline at end of file
diff --git a/blazor/image-editor/quick-access.md b/blazor/image-editor/quick-access.md
index 6c5c662e81..4b9773ce5a 100644
--- a/blazor/image-editor/quick-access.md
+++ b/blazor/image-editor/quick-access.md
@@ -1,41 +1,34 @@
---
layout: post
title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion
-description: Checkout the Quick Access Toolbar available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---
-# Quick access toolbar in the Blazor Image Editor Component
+# Quick Access Toolbar in the Blazor Image Editor Component
-The quick access toolbars in the Image Editor play a vital role in facilitating interactions with annotations like Rectangle, Ellipse, Line, Arrow, and Path. These toolbars offer a diverse array of tools and options that can be tailored to match the specific requirements and preferences associated with each annotation type. The toolbar is only displayed when an annotation is selected, ensuring a focused and contextual user experience.
+The quick access toolbars in the Image Editor facilitate interactions with annotations such as Rectangle, Ellipse, Line, Arrow, and Path. These toolbars provide a configurable set of tools and options tailored to each annotation type. The toolbar appears only when an annotation is selected, ensuring a focused and contextual editing experience.
-The [`ShowQuickAccessToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls the visibility of the quick access toolbar. Users have the flexibility to enable or disable this toolbar, add or remove items, and create a personalized set of tools.
+The [ShowQuickAccessToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls quick access toolbar visibility. The toolbar can be enabled or disabled, items can be added or removed, and a customized toolset can be configured.
## Add a custom toolbar item
-The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [`QuickAccessToolbarOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar is opened, allowing you to modify its contents. To add additional toolbar items to the quick access toolbar, you can access the ToolbarItems property of the [`QuickAccessToolbarEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from the ToolbarItems property based on the Item property, you can customize the options available in the quick access toolbar according to your needs. This gives you the ability to extend the functionality of the quick access toolbar and provide additional tools and options for working with inserted annotations.
+The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar opens, allowing modification of its contents. Additional toolbar items can be included by accessing the `ToolbarItems` property of the [QuickAccessToolbarEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from `ToolbarItems` based on the `Item` property, the quick access toolbar options can be customized to match specific requirements for working with inserted annotations.
-Here is an example of adding the custom toolbar item to the quick access toolbar.
+Here is an example of adding a custom toolbar item to the quick access toolbar.
```cshtml
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Navigations
-inline code`|
+| SubScript |  | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
+| SuperScript |  | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
+| LowerCase |  | Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase |  | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
+
+Please refer to the sample below to add these basic text styling options in the Rich Text Editor.
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/basic-text-format.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Text alignments
+
+The Rich Text Editor offers various text alignment options, including left, center, right, and justify. To utilize these alignment options, add the Alignments item to the items property in the toolbarSettings.
+
+> **Important Note:** Text alignment is applied to the entire block element containing the cursor or selected text, not just to the selected text itself. When you apply an alignment, it affects the whole paragraph or block, even if you've only selected a portion of the text.
+
+Here are the available alignment options:
+
+* Align Left:
+To left-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Left` icon in the toolbar. This will align the entire paragraph with the left margin.
+
+* Align Center:
+To center-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Center` icon in the toolbar. This will center the entire paragraph within its container.
+
+* Align Right:
+To right-align your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Right` icon in the toolbar. This will align the entire paragraph with the right margin.
+
+* Align Justify:
+To fully justify your text, place the cursor in the desired paragraph or select any text within it, then click the `Align Justify` icon in the toolbar. This will distribute the entire paragraph evenly across the line, aligning it with both the left and right margins.
+
+Please refer to the sample and code snippets below to add these alignment options in the Rich Text Editor.
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/text-alignment.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Number and bullet format list
+
+List formatting in the Rich Text Editor allows users to organize content into structured lists, enhancing readability and visual presentation. The control supports two main types of lists:
+
+1. Ordered Lists
+2. Unordered Lists
+
+### Ordered lists
+
+Ordered lists present items in a specific sequence, with each item preceded by a number or letter. The Rich Text Editor provides two ways to create and manage ordered lists:
+
+#### Using the ordered list tool
+
+The `OrderedList` toolbar item offers a quick way to create or toggle a numbered list. To use it, select the desired text in the editor and click the `OrderedList` button in the toolbar. If the selected text is not already a numbered list, it will be converted into one. If it's already a numbered list, clicking the button will remove the list formatting.
+
+#### Number format list tool
+
+For more detailed control over the numbering style, use the `NumberFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `NumberFormatList` dropdown. The selected text will be transformed into a numbered list with the chosen style.
+
+##### Available numbering styles:
+
+* `None`: Removes numbering while maintaining list structure and indentation
+* `Number`: Uses standard numeric sequencing (1, 2, 3, ...)
+* `Lower Roman`: Employs lowercase Roman numerals (i, ii, iii, ...)
+* `Lowercase Greek`: Utilizes lowercase Greek letters (α, β, γ, ...)
+* `Upper Alpha`: Applies uppercase letters (A, B, C, ...)
+* `Lower Alpha`: Uses lowercase letters (a, b, c, ...)
+* `Upper Roman`: Employs uppercase Roman numerals (I, II, III, ...)
+
+You can customize the available number formats using the [NumberFormatList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorNumberFormatList.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorNumberFormatList) property of the Rich Text Editor.
+
+The following example demonstrates how to customize the number format lists in the Rich Text Editor:
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/number-format-list.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Unordered lists
+
+Unordered lists present items with visual markers, providing an effective way to list items without implying order or priority. The Rich Text Editor offers two methods for creating and managing unordered lists:
+
+#### Using the unordered list tool
+
+The `UnorderedList` toolbar item provides a fast way to create or toggle a bulleted list. To use it, select the desired text in the editor and click the `UnorderedList` button in the toolbar. If the selected text is not already a bulleted list, it will be converted into one. If it's already a bulleted list, clicking the button will remove the list formatting.
+
+#### Bullet format list tool
+
+For more control over the bullet style, use the `bulletFormatList` dropdown in the toolbar. Select the desired text in the editor, then choose the preferred format from the `bulletFormatList` dropdown. The selected text will be transformed into a bullet list with the chosen style.
+
+##### Available bullet styles
+
+* `None`: Removes bullet points while maintaining list structure and indentation
+* `Disc`: Displays solid circular bullets
+* `Square`: Uses solid square bullets
+* `Circle`: Presents hollow circular bullets
+
+The following example demonstrates how to customize the bullet format lists in the Rich Text Editor:
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/bullet-format-list.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Nested list creation using Tab key
+
+In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a list item automatically creates a nested list. This behavior allows users to structure their content hierarchically by indenting list items. Each press of the `Tab` key increases the nesting level, converting the current item into a sub-item of the previous one.
+
+Please refer to the below video for visual behavior and interaction examples:
+
+
+
+## Increase and decrease indent
+
+The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.
+
+The Rich Text Editor allows you to configure two types of indentation tools, `Indent` and `Outdent` tool in the Rich Text Editor toolbar using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property.
+
+| Options | Description |
+|----------------|---------|
+| Indent | Increases the indentation |
+| Outdent | Decreases the indentation |
+
+To adjust the text indentation:
+
+1. Select the desired text or paragraph.
+2. Click the Indent or Outdent button in the toolbar.
+3. The indentation of the selected text will be modified accordingly.
+
+To configure the `Indent` and `Outdent` toolbar item, refer to the below code.
+
+### Indentation in lists
+
+The Rich Text Editor provides powerful indentation features for both bullet and number format lists, allowing users to create nested lists and adjust list levels easily.
+
+#### Increasing indent
+
+To increase the indent of a list item:
+
+1. Select the list item you want to indent.
+2. Click the "Increase Indent" button in the toolbar or press Ctrl + ].
+3. The selected item will be indented, creating a nested list.
+
+#### Decreasing indent
+
+To decrease the indent of a list item:
+
+1. Select the indented list item.
+2. Click the "Decrease Indent" button in the toolbar or press Ctrl + [.
+3. The selected item will move back to the previous indentation level.
+
+#### Using tab key for indentation
+
+The Tab key provides a quick way to adjust list indentation:
+
+- Pressing Tab will increase the indent of the selected list item, creating a nested list.
+- Pressing Shift + Tab will decrease the indent of the selected list item, moving it to the previous level.
+
+This behavior allows for efficient creation and management of multi-level lists without the need to use the toolbar buttons.
+
+## Heading formats
+
+The Rich Text Editor provides a feature to format text with various heading styles, such as Heading 1, Heading 2, Heading 3, and Heading 4. These headings allow for structuring content hierarchically, improving readability, and organizing information effectively.
+
+### Built-in formats
+
+The following table list the default format name and width of the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#properties) dropdown and the available list of format names.
+
+| Default Key | Default Value |
+|-----|--------------------------------------|
+| [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormat_Width) | 65px|
+| [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormat.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorFormat_Items) | new List<DropDownItemModel>(){
new DropDownItemModel() { Text = "Paragraph", Value = "P" },
new DropDownItemModel() { Text = "Code", Value = "Pre" },
new DropDownItemModel() { Text = "Quotation", Value = "BlockQuote" },
new DropDownItemModel() { Text = "Heading 1", Value = "H1" },
new DropDownItemModel() { Text = "Heading 2", Value = "H2" },
new DropDownItemModel() { Text = "Heading 3", Value = "H3" },
new DropDownItemModel() { Text = "Heading 4", Value = "H4" }
}; | + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/built-in-formats.razor %} + +{% endhighlight %} +{% endtabs %} + + + +### Custom format + +The Rich Text Editor provides support for custom formats with an existing list. If you want to add additional formats to the format drop-down, pass the format information as `List
) help visually separate sections of content, enhancing readability and structural clarity. + +To insert a horizontal line, place the cursor at the desired location and click the `HorizontalLine` icon in the toolbar. A full-width line will be added, creating a clear visual break between sections of text or other elements. + +Use the `HorizontalLine` tool in the editor below to see the feature in action. + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/horizontal-line.razor %} + +{% endhighlight %} +{% endtabs %} + + + +# Format Painter in Blazor Rich Text Editor + +The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the Rich Text Editor[FormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. + +### Configuring format painter tool in the toolbar + +You can add the `FormatPainter` tool in the Rich Text Editor using the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property. + +Double-clicking the Format Painter toolbar button enables **sticky mode**, allowing multiple formatting applications until the `Escape` key is pressed. In sticky mode, the format painter remains active until the `Escape` key is pressed again to disable it. + +The following example demonstrates how to add the Format Painter tool to the Rich Text Editor toolbar. + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/format-painter.razor %} + +{% endhighlight %} +{% endtabs %} + +## Clear formatting + +The Rich Text Editor component offers a powerful `Clear Format` feature to remove any applied formatting from selected text. + +This feature is particularly useful when you need to: + +- Remove multiple styles at once +- Quickly standardize text formatting +- Prepare text for new styling + +### Configuring clear format + +The Clear Format feature allows users to remove all formatting (like bold, italic, font styles, etc.) from selected text in the Rich Text Editor. To enable this feature, you need to include it in the toolbar configuration. + +Steps to Configure: + +- Open the component file where the Rich Text Editor is implemented. +- Locate the [RichTextEditorToolbarSettings.Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) property in your editor configuration. +- Add `ClearFormat` to the `Items` array within the `ToolbarSettings`. + +Here's an example of how to configure the Clear Format feature: + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/clear-format.razor %} + +{% endhighlight %} +{% endtabs %} + + + +### Using clear format + +Once configured, you can use the Clear Format feature as follows: + +1. Select the text with formatting you want to remove. +2. Click the `Clear Format` button in the toolbar. +3. The selected text will revert to its original, unformatted state. + +Using `Clear Format` makes it easy to undo styling changes and keep your text looking consistent. Examples and code snippets below show how to use 'Clear Format' effectively in the Rich Text Editor. + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/using-clear-format.razor %} + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md index d66c1982d1..4f81c9e8e4 100644 --- a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md +++ b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md @@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic - **OllamaSharp** {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight csharp tabtitle="Package Manager" %} Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} @@ -48,7 +48,7 @@ Install-Package OllamaSharp # For Ollama Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: - For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. -- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. +- For **.NET 8 or .NET 9 or .NET 10** Blazor Server apps, add to **~/Components/App.razor**. ```html @@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode - Install the required NuGet packages: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight csharp tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI @@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI - Add the following to the **~/Program.cs** file in your Blazor WebApp: {% tabs %} -{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} +{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.AI; using Microsoft.Extensions.AI; @@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d - Install the required NuGet packages: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight csharp tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI @@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI - Add the following to the **~/Program.cs** file in your Blazor WebApp: {% tabs %} -{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} +{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.AI; using Azure.AI.OpenAI; @@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models: - Install the required NuGet packages: {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight csharp tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package OllamaSharp @@ -174,7 +174,7 @@ Install-Package OllamaSharp - Add the following to the **~/Program.cs** file in your Blazor WebApp: {% tabs %} -{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} +{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.AI; using Microsoft.Extensions.AI; @@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati - **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. {% tabs %} -{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} +{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} using Syncfusion.Blazor; @@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor(); var app = builder.Build(); {% endhighlight %} -{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} +{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %} using Syncfusion.Blazor; @@ -228,304 +228,233 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Razor Component +## AI-powered Sentiment Analysis in Kanban -This section demonstrates how to implement sentiment analysis in the Syncfusion Blazor Kanban component using AI. The AI Assistant evaluates the emotional tone of each task description and displays a corresponding emoji (😊, 😐, 😞) to help teams quickly assess the mood or urgency of tasks. This can be especially useful in agile workflows where emotional context can influence task priority and team communication. +The AI-powered sentiment analysis feature in Blazor Kanban evaluates customer feedback for delivered tasks and displays emojis (😊, 😐, 😞) to indicate positive, neutral, or negative sentiment. This helps teams quickly assess satisfaction levels and prioritize follow-up actions, improving customer experience in service workflows. -(`Home.razor`) +### UI Structure -```csharp -@using Syncfusion.Blazor.Kanban -@using Syncfusion.Blazor.SplitButtons -@using Syncfusion.Blazor.Calendars -@using Syncfusion.Blazor.Inputs -@using Syncfusion.Blazor.DropDowns -@using AISamples.Components.Models -@using AISamples.Components.Service -@inject AzureAIService OpenAIService - - -
-
-
-
- @foreach (ColumnModel item in columnData)
- {
-
-
-
- @{
- PizzaDataModel card = (PizzaDataModel)context;
-
-
-
-
|
- |
-
-
-
+
+
+ }
+
+
+
-```
+{% endhighlight %}
+{% endtabs %}
-`Home.razor.cs`
+### Analyzing Sentiments with AI
-```csharp
+After the user clicks **Check Customer Sentiments** button, the `GetScore()` method runs. It serializes the Kanban data into JSON and builds a prompt for the AI service using the `GetCompletionAsync` method. The prompt instructs the AI to:
+
+- Provide a `SentimentScore` out of 5 based on the feedback.
+- Skip scoring if feedback is null.
+- Return the updated data strictly in JSON format with all fields included.
-using System.Text.Json;
-using AISamples.Components.Models;
-using Syncfusion.Blazor.DropDowns;
-using Syncfusion.Blazor.Inputs;
-using Syncfusion.Blazor.Kanban;
+The AI response is cleaned to remove extra formatting and deserialized into a list of PizzaDataModel objects. Each item’s `SentimentScore` is mapped to an emoji:
-namespace AISamples.Components.Pages
+- Score > 3 → 😊 smiling face
+- Score = 3 → 😐 neutral face
+- Score ≤ 2 → 😞 disappointed face
+
+Finally, `ShowScore` is set to `true`, and the Kanban board updates to display emojis for delivered items.
+
+```csharp
+private async Task GetScore()
{
- public partial class Home
+ this.IsSpinner = true;
+ string result = "";
+ string json = JsonSerializer.Serialize(Pizza, new JsonSerializerOptions { WriteIndented = true });
+ var description = "Provide a SentimentScore out of 5 (whole numbers only) based on the Feedback. If the feedback is null, do not give a SentimentScore. Use the dataset provided below to make recommendations. NOTE: Return the data in JSON format with all fields included, and return only JSON data, no explanatory text." + json;
+ result = await OpenAIService.GetCompletionAsync(description);
+ string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim();
+ this.Pizza = JsonSerializer.Deserialize
-
-
-
- @card.Title
-
-
-
|
+ if (ShowScore)
+ {
+ Delivered
+ |
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
## Sample Code
A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples).
-
\ No newline at end of file
+
+
+## Error Handling and Troubleshooting
+
+If the AI service fails to return a valid response, the Kanban will display an error message ("Oops! Please try again!"). Common issues include:
+
+- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible.
+- **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported.
+- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
+- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.
+
diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
index a8034ddae5..63b3ae696b 100644
--- a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
+++ b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
@@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic
- **OllamaSharp**
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -48,7 +48,7 @@ Install-Package OllamaSharp # For Ollama
Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page:
- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**.
-- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**.
+- For **.NET 8 or .NET 9 or .NET 10** Blazor Server apps, add to **~/Components/App.razor**.
```html
@@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
@@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
@@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
@@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
@@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models:
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp
@@ -174,7 +174,7 @@ Install-Package OllamaSharp
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
@@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati
- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
{% tabs %}
-{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
+{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
using Syncfusion.Blazor;
@@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
{% endhighlight %}
-{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
+{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
using Syncfusion.Blazor;
@@ -228,342 +228,215 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-## Razor Component
+## AI-powered Kanban Smart Card Generation
-This section demonstrates how to implement the Syncfusion Blazor Kanban component with AI-powered task generation. The AI Assistant analyzes the provided project description and automatically suggests relevant tasks, which are then displayed in the Kanban board.
+The AI-powered Kanban feature integrates Blazor Kanban with an AI service to automatically generate structured task cards based on user input. This functionality simplifies project planning by allowing users to enter basic project details and the desired number of tasks. The backend logic then uses AI to create well-defined tasks, including fields like **Title**, **Description**, **Status**, and **Story Points**, and dynamically updates the Kanban board. This approach ensures faster task creation, consistent formatting, and an interactive experience for managing projects.
-(`Home.razor`)
+### UI Structure
+
+The Kanban AI interface starts with a simple form where users provide **Project Details** and the **Number of Tasks** to generate. Below these inputs, a Progress Button labeled “Generate Tasks” triggers the AI process. This button shows a loading state during task generation for better user feedback.
+
+- **Project Details:** A multiline text box for describing the project.
+- **Number of Tasks:** A numeric input for specifying how many tasks to generate.
+- **Generate Button:** A progress-enabled button that calls `GenerateTasks()` to start AI-based task creation.
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Generating Tasks with AI
+
+After the user enters project details and the number of tasks, clicking Generate Tasks calls `GenerateTasks()`, which triggers `GenerateProjectTasks()` to build a detailed prompt for the AI service. This prompt includes the project description, task count, and strict instructions to return data in JSON format with fields like Id, Title, Description, Status, StoryPoints, and Color.
+
+The prompt is then sent to the AI using `GetCompletionAsync()`, which processes the request and returns a JSON response containing the generated tasks. The response is cleaned to remove unnecessary formatting and deserialized into a list of `SmartSuggestionDataModel` objects. These tasks are stored in `smartSuggestion` and displayed in the Kanban board or backlog view.
```csharp
-@rendermode InteractiveServer
-@inject AzureAIService OpenAIService
-@using Syncfusion.Blazor.Kanban
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.SplitButtons
-@using Syncfusion.Blazor.Popups
-@using Syncfusion.Blazor.Inputs
-@using Syncfusion.Blazor.Notifications
-@using BlazorApp4.Components.Models
-@using BlazorApp4.Components.Service
-@using Syncfusion.Blazor.Grids
-
-@if (isHomapage)
+private async Task GenerateProjectTasks()
{
-
-
+ try
+ {
+ if (!string.IsNullOrEmpty(TextBoxValue) && !string.IsNullOrEmpty(TasksValue))
+ {
+ string result = "";
+ var description = $"Generate {TasksValue} task recommendations for {TextBoxValue}. Each task should include the following fields: Id (like example: ID should be in project name simple 4char word - 1), Title, Status, Description, Assignee, StoryPoints, Color and Due Date, formatted according to the dataset. Assign each task to the Assignee: empty string, set the Status to 'Open', and use black for the Color. Use the dataset provided below to create your recommendations. IMPORTANT: Return the data strictly in JSON format with all the required fields. Only the JSON data is needed, no additional text.Return only the JSON array format without any explanations.";
+ result = await OpenAIService.GetCompletionAsync(description);
+ if (result != null)
+ {
+ string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim();
+ List
-
-
-
-
-
- AI Smart Task Suggestion-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- @if (showBacklogs)
- {
-
-
-}
-Kanban Board-
-
-
-
-
+
-
+
- if (!showBacklogBoard)
- {
-
+
@card.Title
-
- }
- else if (showBacklogBoard)
- {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- }
-
-
- }
-
-
-
-
-
- @card.Title
-
-
-
- @card.Description
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
- @card.Description
-
-
-
+ }
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Backlog Grid View
+
+When users switch to **Backlog View**, tasks are displayed in a grid using `SfGrid`. This view allows adding, deleting, and editing tasks through a **dialog popup** for structured input.
+
+- **Dialog Editing:** Uses [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EditSettings) with [Dialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Dialog) mode for structured editing.
+- **Validation:** Ensures required fields like Task ID, Title, and Status are filled.
+- **Data Binding:** The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property binds to `smartSuggestion`, just like Kanban.
+
+{% tabs %}
+{% highlight razor %}
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
-
@@ -867,4 +867,4 @@ A complete working example is available in the [Syncfusion Blazor AI Samples Git
Explore the AI-powered Smart Pivot Table in action by visiting the live demo:
-👉 [Try the Live Demo](https://blazor.syncfusion.com/demos/pivot-table/ai-smart-pivot?theme=fluent2)
\ No newline at end of file
+👉 [Try the Live Demo](https://blazor.syncfusion.com/demos/pivot-table/ai-smart-pivot?theme=fluent2)
diff --git a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
index 3074d17360..b6a21e6c14 100644
--- a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
+++ b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
@@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic
- **OllamaSharp**
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -48,7 +48,7 @@ Install-Package OllamaSharp # For Ollama
Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page:
- For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**.
-- For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**.
+- For **.NET 8 or .NET 9 or .NET 10** Blazor Server apps, add to **~/Components/App.razor**.
```html
@@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
@@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
@@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
@@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
@@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models:
- Install the required NuGet packages:
{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp
@@ -174,7 +174,7 @@ Install-Package OllamaSharp
- Add the following to the **~/Program.cs** file in your Blazor WebApp:
{% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
@@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati
- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
{% tabs %}
-{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
+{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
using Syncfusion.Blazor;
@@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor();
var app = builder.Build();
{% endhighlight %}
-{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
+{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
using Syncfusion.Blazor;
@@ -228,432 +228,376 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-## Razor Component
+## AI-powered Rich Text Editor in Blazor
-This section implements the Syncfusion Blazor Rich Text Editor with AI-powered content assistance features such as rephrase, correct grammar, summarize, elaborate, and translate.
+This guide explains how to integrate a full-featured AI writing assistant into the Blazor Rich Text Editor using Azure OpenAI (via Semantic Kernel). The implementation supports **Rephrase**, **Correct Grammar**, **Summarize**, **Elaborate**, and **Translate** with live preview, dynamic tone and language controls, skeleton loading, and safe content replacement with undo support.
-(`Home.razor`)
+### How the Custom Toolbar is Rendered
-```csharp
-@inject AzureAIService semanticKernelAI
-@inject IJSRuntime JSRuntime
-@using AISamples.Components.Service
-@using Syncfusion.Blazor.RichTextEditor
-@using Syncfusion.Blazor.SplitButtons
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.Popups
-@using Syncfusion.Blazor.Notifications
-@using Syncfusion.Blazor.DropDowns
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+ @if (this.enableRephraseChips)
+ {
+
+
-
+ Target Language
+
+
+
+
-
- @if (this.enableRephraseChips)
- {
-
+ }
- Target Language
-
-
-
- }
-
-
-
+
+
-
+
+
+
+
+ @if (!isContentGenerating)
+ {
+ @if (noResultsFound)
{
- @if (noResultsFound)
- {
-
+
+
- @if (!isContentGenerating)
+
-
- }
- else {
-
-
-
-
-
- No results found
-
-
-
-
-
+
+ }
+ else {
+
- }
- } else {
+
+
+
No results found
-
-
+
+ - - - - -
-
+ } else {
+
+
+
+
-
+
+
+ + + + +
- @if (!string.IsNullOrEmpty(sentiment)) {
-
- }
-
+
+
+
+
-
+
-
-
-
+
+
+ @if (!string.IsNullOrEmpty(sentiment)) {
+
+ }
+
+
+ Integrate AI with the EditorIntegrate the AI assistant into the rich text editor by capturing the content from the editor, sending it to the AI service, and displaying the results or suggestions back in the editor. SummarizeThis function condenses the selected content into a brief summary, capturing the main points succinctly. ElaborateThis function expands the selected content, adding additional details and context. RephraseThis function rewrites the selected content to convey the same meaning using different words or structures. It also enables rephrase options and disables language selection. Correct GrammarThis function reviews and corrects the grammar of the selected content, ensuring it adheres to standard grammatical rules. TranslateThis function translates the selected content into the specified language, enabling language selection and disabling rephrase options. "; - private bool dialogVisible { get; set; } - private bool enabelAIAssitantButton { get; set; } = false; - private bool enabelRegenerateContentButton { get; set; } = false; - private bool enabelContentButton { get; set; } = true; - private string promptQuery = string.Empty; - private string subQuery = string.Empty; - private string[] chipValue = new[] { "Standard" }; - private string translatelanguage = "EN"; - private string dropVal { get; set; } = "Rephrase"; - private bool enableRephraseChips { get; set; } = true; - private bool enableLanguageList { get; set; } = false; - private bool noResultsFound { get; set; } = false; - public bool isContentGenerating { get; set; } = true; - private string AIResult { get; set; } = string.Empty; - private bool isSentimentCheck { get; set; } = false; - private MarkdownPipeline pipeline { get; set; } = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build(); - private string sentiment = ""; - private string apiResultData = ""; - private string ButtonClass = "e-tbar-btn"; - private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) - { - Value = args.Value; - enabelAIAssitantButton = string.IsNullOrWhiteSpace(Value); - } - private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args) - { - if (args.RequestType == "SourceCode") - { - this.ButtonClass = "e-tbar-btn e-overlay"; - } - if (args.RequestType == "Preview") - { - this.ButtonClass = "e-tbar-btn"; - } - } - private void UpdateTextAreaStatus(InputEventArgs args) - { - Value = args.Value; - enabelRegenerateContentButton = string.IsNullOrWhiteSpace(Value); - } - private async Task AIQuerySelectedMenu(MenuEventArgs args) - { - await DialogueOpen(args.Item.Text); - } - private async Task Rephrase() - { - await DialogueOpen("Rephrase"); - } - private async Task DialogueOpen(string selectedQuery) - { - var selectionText = await rteObj.GetSelectedHtmlAsync(); - if (!string.IsNullOrEmpty(selectionText)) - { - dialogVisible = true; - dropVal = QueryList.FirstOrDefault(q => q.Text.Equals(selectedQuery, StringComparison.OrdinalIgnoreCase))?.ID; - promptQuery = selectionText; - await this.rteObj.SaveSelectionAsync(); - await this.leftRteChildObj.RefreshUIAsync(); - await UpdateAISuggestionsData(selectedQuery); - } - else - { - await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(true), ShowCloseButton = true, Timeout = 0 }); - } - } - private async Task SelectedChipsChanged(Syncfusion.Blazor.Buttons.SelectionChangedEventArgs args) - { - if (chipValue.Length == 0 && args != null && args.RemovedItems.Length > 0) - { - chipValue = new [] { args.RemovedItems[0] }; - } - await UpdateAISuggestionsData("Rephrase"); - } - private async Task AITranslateDropdownList(ChangeEventArgs | ||||||||||||||||||||||||||||||||||||||||||||||