telerik · Tsvetomir-Hr · Nov 11, 2025 · Nov 10, 2025
@@ -98,12 +98,15 @@ The following table lists the FileSelect parameters. Also check the [FileSelect
 
 ## FileSelect Reference and Methods
 
-The File Select exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` attribute (example below). The FileSelect methods are:
+The File Select exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` attribute. The FileSelect methods are:
 
 | Method | Description |
 | --- | --- |
-| `ClearFiles` | Clears all files from the list. |
-| `OpenSelectFilesDialog` | Shows the browser's file selection dialog. This method [doesn't work in Safari due to browser security restrictions](slug:upload-kb-openselectfilesdialog-safari). |
+| `ClearFiles()` | Clears all files from the list. |
+| `OpenSelectFilesDialog()` | Shows the browser's file selection dialog. This method [doesn't work in Safari due to browser security restrictions](slug:upload-kb-openselectfilesdialog-safari). |
+| `RemoveFileAsync(string fileId)` | Removes the file with the specified identifier from the collection. |
+
+For a complete list of all FileSelect methods, see the [FileSelect API reference](slug:Telerik.Blazor.Components.TelerikFileSelect#methods).
 
 >caption Get reference to the FileSelect and execute methods
 

@@ -1,7 +1,7 @@
 ---
 title: Templates
 page_title: FileSelect Templates
-description: Discover the Blazor FileSelect component templates that enable you to customize the rendered button. The templates allow you to change the text and add custom content. 
+description: Discover the Blazor FileSelect component templates that enable you to customize the rendered button and file list items. The templates allow you to change the text and add custom content. 
 slug: fileselect-templates
 tags: telerik,blazor,fileselect,templates
 published: True
@@ -10,19 +10,125 @@ position: 30
 
 # FileSelect Templates
 
+The FileSelect component provides templates that allow you to customize the rendering of the select files button and the file list items.
+
+* [SelectFilesButtonTemplate](#selectfilesbuttontemplate)
+* [FileTemplate](#filetemplate)
+* [FileInfoTemplate](#fileinfotemplate)
+
+## SelectFilesButtonTemplate
+
 The `SelectFilesButtonTemplate` allows you to modify the **Select Files...** button. It lets you change the default text of the button and include custom content like an [icon](slug:common-features-icons) or image.
 
 >caption Using FileSelect SelectFilesButtonTemplate
 
 ```CSHTML
-<div>
-    <TelerikFileSelect>
-        <SelectFilesButtonTemplate>
-            <TelerikSvgIcon Icon="@SvgIcon.Upload" />
-            Click to Select Files for Upload
-        </SelectFilesButtonTemplate>
-    </TelerikFileSelect>
-</div>
+<TelerikFileSelect>
+    <SelectFilesButtonTemplate>
+        <TelerikSvgIcon Icon="@SvgIcon.Upload" />
+        Click to Select Files for Upload
+    </SelectFilesButtonTemplate>
+</TelerikFileSelect>
+```
+
+## FileTemplate
+
+The `FileTemplate` allows full customization of the items in the file list. When you use this template, all built-in elements such as the file size, name, icon, and action buttons are replaced by the content you provide within the template.
+
+The `FileTemplate` exposes a `context` of type `FileTemplateContext` that provides access to the file information through the `File` property.
+
+The example below demonstrates how to use the `RemoveFileAsync()` method to remove files programmatically from the collection.
+
+>caption Using FileSelect FileTemplate
+
+```CSHTML
+<TelerikFileSelect @ref="@FileSelectRef" Files="@InitialFiles">
+    <FileTemplate Context="fileContext">
+        <div class="custom-file-item">
+            <div class="file-badge">
+                @fileContext.File.Extension.TrimStart('.').ToUpper()
+            </div>
+            <div class="file-info">
+                <div><strong>@fileContext.File.Name@fileContext.File.Extension</strong></div>
+                <div>Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB</div>
+            </div>
+            <TelerikButton Icon="@SvgIcon.X"
+                           FillMode="@ThemeConstants.Button.FillMode.Clear"
+                           OnClick="@(() => RemoveFile(fileContext.File.Id))">
+            </TelerikButton>
+        </div>
+    </FileTemplate>
+</TelerikFileSelect>
+
+<style>
+    .custom-file-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin-bottom: 5px;
+    }
+
+    .file-badge {
+        width: 40px;
+        height: 40px;
+        background: #0d6efd;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-size: 10px;
+        font-weight: bold;
+    }
+
+    .file-info {
+        flex: 1;
+    }
+</style>
+
+@code {
+    private TelerikFileSelect FileSelectRef { get; set; }
+
+    private List<FileSelectFileInfo> InitialFiles { get; set; } = new List<FileSelectFileInfo>()
+    {
+        new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 },
+        new FileSelectFileInfo(){ Id="2", Name="Image", Extension=".jpg", Size = 1024 * 1024 * 4 },
+        new FileSelectFileInfo(){ Id="3", Name="Presentation", Extension=".pptx", Size = 1024 * 1024 * 8 },
+        new FileSelectFileInfo(){ Id="4", Name="Spreadsheet", Extension=".xlsx", Size = 1024 * 1024 * 3 },
+    };
+
+    private void RemoveFile(string fileId)
+    {
+        FileSelectRef.RemoveFile(fileId);
+    }
+}
+```
+
+## FileInfoTemplate
+
+The `FileInfoTemplate` allows you to customize the general file information section while preserving the rest of the built-in features such as the file icon and action buttons.
+
+The `FileInfoTemplate` exposes a `context` of type `FileInfoTemplateContext` that provides access to the file information through the `File` property.
+
+>caption Using FileSelect FileInfoTemplate
+
+```CSHTML
+<TelerikFileSelect Files="@InitialFiles">
+    <FileInfoTemplate Context="fileContext">
+        <strong>File Name:</strong> @fileContext.File.Name <br />
+        <strong>Size:</strong> @(fileContext.File.Size / 1024) KB
+    </FileInfoTemplate>
+</TelerikFileSelect>
+
+@code {
+    private List<FileSelectFileInfo> InitialFiles { get; set; } = new List<FileSelectFileInfo>()
+    {
+        new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 }
+    };
+}
 ```
 
 ## See Also

@@ -236,13 +236,18 @@ The following table lists the Upload parameters. Also check the [Upload API Refe
 
 ## Upload Reference and Methods
 
-The Upload exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` attribute (example below). The Upload methods are:
+The Upload exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` attribute. The Upload methods are:
 
 | Method | Description |
 | --- | --- |
-| `ClearFiles` | Clears all files from the list, both uploaded and in queue. |
-| `OpenSelectFilesDialog` | Shows the browser's file selection dialog. This method [doesn't work in Safari due to browser security restrictions](slug:upload-kb-openselectfilesdialog-safari). |
-| `UploadFiles` | Uploads all valid selected files. Fires the [OnUpload](slug:upload-events#onupload) event. |
+| `CancelFile(string fileId)` | Cancels the upload of the specified file and removes it from the collection. |
+| `ClearFiles()` | Clears all files from the list, both uploaded and in queue. |
+| `OpenSelectFilesDialog()` | Shows the browser's file selection dialog. This method [doesn't work in Safari due to browser security restrictions](slug:upload-kb-openselectfilesdialog-safari). |
+| `PauseFile(string fileId)` | Pauses the upload of the file with the specified identifier, if it exists in the current collection. |
+| `RemoveFile(string fileId)` | Removes the file with the specified identifier from the collection. |
+| `ResumeFile(string fileId)` | Resumes the upload process for the specified file. |
+| `RetryFile(string fileId)` | Attempts to retry the upload of a file with the specified identifier. |
+| `UploadFiles()` | Uploads all valid selected files. Fires the [OnUpload](slug:upload-events#onupload) event. |
 
 >caption Get reference to the Upload and execute methods
 

@@ -1,7 +1,7 @@
 ---
 title: Templates
 page_title: Upload Templates
-description: Discover the Blazor Upload component templates that enable you to customize the rendered button. Through these templates, you to change the text and add custom content. 
+description: Discover the Blazor Upload component templates that enable you to customize the rendered button and file list items. Through these templates, you can change the text and add custom content. 
 slug: upload-templates
 tags: telerik,blazor,upload,templates
 published: True
@@ -10,17 +10,124 @@ position: 30
 
 # Upload Templates
 
+The Upload component provides templates that allow you to customize the rendering of the select files button and the file list items.
+
+* [SelectFilesButtonTemplate](#selectfilesbuttontemplate)
+* [FileTemplate](#filetemplate)
+* [FileInfoTemplate](#fileinfotemplate)
+
+## SelectFilesButtonTemplate
+
 The `SelectFilesButtonTemplate` allows you to modify the **Select Files...** button. It lets you change the default text of the button and include custom content like an [icon](slug:common-features-icons) or image.
 
 >caption Using Upload SelectFilesButtonTemplate
 
 ```RAZOR
-    <TelerikUpload>
-        <SelectFilesButtonTemplate>
-            <TelerikSvgIcon Icon="@SvgIcon.Upload" />
-            Click to Select Files for Upload
-        </SelectFilesButtonTemplate>
-    </TelerikUpload>
+<TelerikUpload>
+    <SelectFilesButtonTemplate>
+        <TelerikSvgIcon Icon="@SvgIcon.Upload" />
+        Click to Select Files for Upload
+    </SelectFilesButtonTemplate>
+</TelerikUpload>
+```
+
+## FileTemplate
+
+The `FileTemplate` allows full customization of the items in the file list. When you use this template, all built-in elements such as the progress bar, action buttons, file size, name, and icon are replaced by the content you provide within the template.
+
+The `FileTemplate` exposes a `context` of type `FileTemplateContext` that provides access to the file information through the `File` property.
+
+The example below demonstrates how to use the `RemoveFileAsync()` method to remove files programmatically from the collection. You can perform most file operations programmatically through the [Upload component methods](slug:upload-overview#upload-reference-and-methods).
+
+>caption Using Upload FileTemplate
+
+```RAZOR
+<TelerikUpload @ref="@UploadRef" Files="@InitialFiles">
+    <FileTemplate Context="fileContext">
+        <div class="custom-file-item">
+            <div class="file-badge">
+                @fileContext.File.Extension.TrimStart('.').ToUpper()
+            </div>
+            <div class="file-info">
+                <div><strong>@fileContext.File.Name@fileContext.File.Extension</strong></div>
+                <div>Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB</div>
+            </div>
+            <TelerikButton Icon="@SvgIcon.X"
+                           FillMode="@ThemeConstants.Button.FillMode.Clear"
+                           OnClick="@(() => RemoveFile(fileContext.File.Id))">
+            </TelerikButton>
+        </div>
+    </FileTemplate>
+</TelerikUpload>
+
+<style>
+    .custom-file-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin-bottom: 5px;
+    }
+
+    .file-badge {
+        width: 40px;
+        height: 40px;
+        background: #0d6efd;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-size: 10px;
+        font-weight: bold;
+    }
+
+    .file-info {
+        flex: 1;
+    }
+</style>
+
+@code {
+    private TelerikUpload UploadRef { get; set; }
+
+    private List<UploadFileInfo> InitialFiles { get; set; } = new List<UploadFileInfo>()
+    {
+        new UploadFileInfo(){ Id="2", Name="Image", Extension=".jpg", Size = 1024 * 1024 * 4 },
+        new UploadFileInfo(){ Id="3", Name="Presentation", Extension=".pptx", Size = 1024 * 1024 * 8 },
+        new UploadFileInfo(){ Id="4", Name="Spreadsheet", Extension=".xlsx", Size = 1024 * 1024 * 3 }
+    };
+
+    private void RemoveFile(string fileId)
+    {
+        UploadRef.RemoveFile(fileId);
+    }
+}
+```
+
+## FileInfoTemplate
+
+The `FileInfoTemplate` allows you to customize the general file information section while preserving the rest of the built-in features such as the file icon, progress bar, and action buttons.
+
+The `FileInfoTemplate` exposes a `context` of type `FileInfoTemplateContext` that provides access to the file information through the `File` property.
+
+>caption Using Upload FileInfoTemplate
+
+```RAZOR
+<TelerikUpload Files="@InitialFiles">
+    <FileInfoTemplate Context="fileContext">
+        <strong>File Name:</strong> @fileContext.File.Name <br />
+        <strong>Size:</strong> @(fileContext.File.Size / 1024) KB
+    </FileInfoTemplate>
+</TelerikUpload>
+
+@code {
+    private List<UploadFileInfo> InitialFiles { get; set; } = new List<UploadFileInfo>()
+    {
+        new UploadFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 }
+    };
+}
 ```
 
 ## See Also