diff --git a/blazor/file-upload/template.md b/blazor/file-upload/template.md
index 6fd860dd61..7ce7a4e5b3 100644
--- a/blazor/file-upload/template.md
+++ b/blazor/file-upload/template.md
@@ -1,7 +1,7 @@
---
layout: post
title: Template in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here about Template in Syncfusion Blazor File Upload component and much more details.
+description: Learn how to customize the Syncfusion Blazor File Upload component's appearance using templates, including how to add a progress bar.
platform: Blazor
control: File Upload
documentation: ug
@@ -9,12 +9,10 @@ documentation: ug
# Template in Blazor File Upload Component
-The template feature customizes how each file item is rendered in the uploader UI. It enables full control over layout and styling for file details such as name, size, and status, so the interface can match application design requirements and provide a tailored user experience.
+The Blazor File Upload component allows for the customization of the file list items by using a template. This provides the flexibility to define the structure and styling of individual file elements, such as the file name, size, and status. A custom template can create a tailored and visually appealing file upload interface that aligns with an application's design and user experience requirements.
### With server-side API endpoint
-Use a template with server endpoints when uploads are processed by a backend. The template controls only the display of file items; the upload flow still uses SaveUrl and RemoveUrl.
-
```cshtml
@using Syncfusion.Blazor.Inputs
@@ -22,45 +20,50 @@ Use a template with server endpoints when uploads are processed by a backend. Th
-
-
File Name : @(context.Name)
-
File Size : @(context.Size)
-
File Status : @(context.Status)
+
+
+
File Name : @context.Name
+
File Size : @context.Size
+
File Status : @context.Status
+
```
### Without server-side API endpoint
-Use a template without server endpoints when handling files locally (for example, demos or trusted environments). The template syntax and available context properties are the same as the server-backed example.
-
```cshtml
@using Syncfusion.Blazor.Inputs
-
-
File Name : @(context.Name)
-
File Size : @(context.Size)
-
File Status : @(context.Status)
+
+
+
File Name : @context.Name
+
File Size : @context.Size
+
File Status : @context.Status
+
```
-### Adding progressbar using template
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrSZOLhhmAhbeZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Adding a progress bar using a template
-When using a custom file template, the built-in progress bar is not shown. The following example disables the default progress indicator (ShowProgressBar=false), renders a custom progress element in the template, and updates it during stream read/write in the ValueChange event. The template displays file name, size, progress, and status, and toggles remove/delete icons based on item state. In browser-only environments (such as WebAssembly), write streams to appropriate storage or a server API; writing directly to the local file system is supported in server/desktop contexts.
+When using a file upload template, the default progress bar is not displayed in the UI. A progress bar can be added within the template, and its progress can be updated by reading and writing to the stream in the `ValueChange` event. The following code snippet demonstrates how to add a progress bar to a Blazor File Upload component using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
```cshtml
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.ProgressBar
-
-
+
+
+
-
+
- @this.GetFileName(context.Name)
+ @GetFileName(context.Name)@("." + context.Type)
@if (context.Size > 0)
{
@@ -71,9 +74,9 @@ When using a custom file template, the built-in progress bar is not shown. The f
{
-
+
- @(ProgressValue.ToString() + "%")
+ @(ProgressValue + "%")
}
@if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
@@ -90,52 +93,50 @@ When using a custom file template, the built-in progress bar is not shown. The f
}
@if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
{
-
+
}
else
{
-
+
}
-
+
@code {
- private SfUploader uploderObj;
- public bool isVisible { get; set; } = false;
- private FileInfo CurrentFile {get; set;}
+ private SfUploader uploaderObj;
+ private FileInfo CurrentFile { get; set; }
public string fileSize { get; set; } = "0";
public string RemoveIconDisable = string.Empty;
-#pragma warning disable CA2213 // Disposable fields should be disposed
private readonly SemaphoreSlim FileSemaphore = new SemaphoreSlim(1);
-#pragma warning restore CA2213 // Disposable fields should be disposed
private decimal ProgressValue { get; set; } = 0;
private Dictionary fileStates = new Dictionary();
+
public string CalculateFileSize(double size)
{
- string fileSizeStr = "";
if (size >= 1024 * 1024)
{
- return fileSizeStr = $"{size / (1024f * 1024f):0.00} MB";
+ return $"{size / (1024f * 1024f):0.00} MB";
}
else if (size >= 1024)
{
- return fileSizeStr = $"{size / 1024f:0.00} KB";
+ return $"{size / 1024f:0.00} KB";
}
else
{
- return fileSizeStr = $"{size} bytes";
+ return $"{size} bytes";
}
}
+
private string GetFileName(string fileName)
{
string type = GetFileType(fileName);
string[] names = fileName.Split(new string[] { "." + type }, StringSplitOptions.None);
return names[0];
}
+
private string GetFileType(string name)
-#pragma warning restore CA1822 // Mark members as static
{
string extension = string.Empty;
int index = name.LastIndexOf('.');
@@ -143,51 +144,45 @@ When using a custom file template, the built-in progress bar is not shown. The f
{
extension = name.Substring(index + 1);
}
-
- return (!string.IsNullOrEmpty(extension)) ? extension : string.Empty;
- }
- private async Task onFileRemove()
- {
- await uploderObj.RemoveAsync();
+ return !string.IsNullOrEmpty(extension) ? extension : string.Empty;
}
+
public async Task ClickHandler(FileInfo context)
{
- await uploderObj.RemoveAsync(new FileInfo[] { context });
+ await uploaderObj.RemoveAsync(new FileInfo[] { context });
}
- public void onBeforeUpload(BeforeUploadEventArgs args)
+
+ public void OnBeforeUpload(BeforeUploadEventArgs args)
{
foreach (var file in args.FilesData)
{
fileStates[file.Name] = false;
}
}
- public void onSuccess(SuccessEventArgs args)
+
+ public void OnSuccess(SuccessEventArgs args)
{
- //fileStates[args.File.Name] = false;
- isVisible = false;
- this.ProgressValue = 0;
+ ProgressValue = 0;
}
-
- public async Task onChange(UploadChangeEventArgs args)
+
+ public async Task OnChange(UploadChangeEventArgs args)
{
await FileSemaphore.WaitAsync();
try
{
foreach (var file in args.Files)
{
- var path = @"" + file.FileInfo.Name;
+ var path = Path.Combine(Path.GetTempPath(), file.FileInfo.Name);
CurrentFile = file.FileInfo;
CurrentFile.Status = "Uploading";
await using FileStream writeStream = new(path, FileMode.Create);
using var readStream = file.File.OpenReadStream(file.File.Size);
var bytesRead = 0;
- var totalRead = 0;
var buffer = new byte[1024 * 10];
while ((bytesRead = await readStream.ReadAsync(buffer)) != 0)
{
RemoveIconDisable = "e-disabled";
- totalRead += bytesRead;
await writeStream.WriteAsync(buffer, 0, bytesRead);
ProgressValue = (long)((decimal)readStream.Position * 100) / readStream.Length;
StateHasChanged();
@@ -195,7 +190,6 @@ When using a custom file template, the built-in progress bar is not shown. The f
CurrentFile.Status = "File uploaded successfully";
RemoveIconDisable = string.Empty;
fileStates[file.FileInfo.Name] = true;
-
}
}
catch (Exception ex)
@@ -211,4 +205,6 @@ When using a custom file template, the built-in progress bar is not shown. The f
}
```
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLytYhhLmmEGpkj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
\ No newline at end of file