Skip to content

Commit 87f641e

Browse files
CopilotTsvetomir-Hr
Copilot
and
Tsvetomir-Hr
authored
docs(FileSelect,Upload): add docs for file templates (#3339)
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
1 parent 8cf8919 commit 87f641e

File tree

4 files changed

+244
-23
lines changed

4 files changed

+244
-23
lines changed

‎components/fileselect/overview.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,15 @@ The following table lists the FileSelect parameters. Also check the [FileSelect
9898

9999
## FileSelect Reference and Methods
100100

101-
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:
101+
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:
102102

103103
| Method | Description |
104104
| --- | --- |
105-
| `ClearFiles` | Clears all files from the list. |
106-
| `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). |
105+
| `ClearFiles()` | Clears all files from the list. |
106+
| `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). |
107+
| `RemoveFileAsync(string fileId)` | Removes the file with the specified identifier from the collection. |
108+
109+
For a complete list of all FileSelect methods, see the [FileSelect API reference](slug:Telerik.Blazor.Components.TelerikFileSelect#methods).
107110

108111
>caption Get reference to the FileSelect and execute methods
109112

‎components/fileselect/templates.md‎

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Templates
33
page_title: FileSelect Templates
4-
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.
4+
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.
55
slug: fileselect-templates
66
tags: telerik,blazor,fileselect,templates
77
published: True
@@ -10,19 +10,125 @@ position: 30
1010

1111
# FileSelect Templates
1212

13+
The FileSelect component provides templates that allow you to customize the rendering of the select files button and the file list items.
14+
15+
* [SelectFilesButtonTemplate](#selectfilesbuttontemplate)
16+
* [FileTemplate](#filetemplate)
17+
* [FileInfoTemplate](#fileinfotemplate)
18+
19+
## SelectFilesButtonTemplate
20+
1321
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.
1422

1523
>caption Using FileSelect SelectFilesButtonTemplate
1624
1725
```CSHTML
18-
<div>
19-
<TelerikFileSelect>
20-
<SelectFilesButtonTemplate>
21-
<TelerikSvgIcon Icon="@SvgIcon.Upload" />
22-
Click to Select Files for Upload
23-
</SelectFilesButtonTemplate>
24-
</TelerikFileSelect>
25-
</div>
26+
<TelerikFileSelect>
27+
<SelectFilesButtonTemplate>
28+
<TelerikSvgIcon Icon="@SvgIcon.Upload" />
29+
Click to Select Files for Upload
30+
</SelectFilesButtonTemplate>
31+
</TelerikFileSelect>
32+
```
33+
34+
## FileTemplate
35+
36+
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.
37+
38+
The `FileTemplate` exposes a `context` of type `FileTemplateContext` that provides access to the file information through the `File` property.
39+
40+
The example below demonstrates how to use the `RemoveFileAsync()` method to remove files programmatically from the collection.
41+
42+
>caption Using FileSelect FileTemplate
43+
44+
```CSHTML
45+
<TelerikFileSelect @ref="@FileSelectRef" Files="@InitialFiles">
46+
<FileTemplate Context="fileContext">
47+
<div class="custom-file-item">
48+
<div class="file-badge">
49+
@fileContext.File.Extension.TrimStart('.').ToUpper()
50+
</div>
51+
<div class="file-info">
52+
<div><strong>@fileContext.File.Name@fileContext.File.Extension</strong></div>
53+
<div>Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB</div>
54+
</div>
55+
<TelerikButton Icon="@SvgIcon.X"
56+
FillMode="@ThemeConstants.Button.FillMode.Clear"
57+
OnClick="@(() => RemoveFile(fileContext.File.Id))">
58+
</TelerikButton>
59+
</div>
60+
</FileTemplate>
61+
</TelerikFileSelect>
62+
63+
<style>
64+
.custom-file-item {
65+
display: flex;
66+
align-items: center;
67+
gap: 10px;
68+
padding: 10px;
69+
border: 1px solid #ddd;
70+
border-radius: 4px;
71+
margin-bottom: 5px;
72+
}
73+
74+
.file-badge {
75+
width: 40px;
76+
height: 40px;
77+
background: #0d6efd;
78+
color: white;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
border-radius: 4px;
83+
font-size: 10px;
84+
font-weight: bold;
85+
}
86+
87+
.file-info {
88+
flex: 1;
89+
}
90+
</style>
91+
92+
@code {
93+
private TelerikFileSelect FileSelectRef { get; set; }
94+
95+
private List<FileSelectFileInfo> InitialFiles { get; set; } = new List<FileSelectFileInfo>()
96+
{
97+
new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 },
98+
new FileSelectFileInfo(){ Id="2", Name="Image", Extension=".jpg", Size = 1024 * 1024 * 4 },
99+
new FileSelectFileInfo(){ Id="3", Name="Presentation", Extension=".pptx", Size = 1024 * 1024 * 8 },
100+
new FileSelectFileInfo(){ Id="4", Name="Spreadsheet", Extension=".xlsx", Size = 1024 * 1024 * 3 },
101+
};
102+
103+
private void RemoveFile(string fileId)
104+
{
105+
FileSelectRef.RemoveFile(fileId);
106+
}
107+
}
108+
```
109+
110+
## FileInfoTemplate
111+
112+
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.
113+
114+
The `FileInfoTemplate` exposes a `context` of type `FileInfoTemplateContext` that provides access to the file information through the `File` property.
115+
116+
>caption Using FileSelect FileInfoTemplate
117+
118+
```CSHTML
119+
<TelerikFileSelect Files="@InitialFiles">
120+
<FileInfoTemplate Context="fileContext">
121+
<strong>File Name:</strong> @fileContext.File.Name <br />
122+
<strong>Size:</strong> @(fileContext.File.Size / 1024) KB
123+
</FileInfoTemplate>
124+
</TelerikFileSelect>
125+
126+
@code {
127+
private List<FileSelectFileInfo> InitialFiles { get; set; } = new List<FileSelectFileInfo>()
128+
{
129+
new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 }
130+
};
131+
}
26132
```
27133

28134
## See Also

‎components/upload/overview.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,13 +236,18 @@ The following table lists the Upload parameters. Also check the [Upload API Refe
236236

237237
## Upload Reference and Methods
238238

239-
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:
239+
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:
240240

241241
| Method | Description |
242242
| --- | --- |
243-
| `ClearFiles` | Clears all files from the list, both uploaded and in queue. |
244-
| `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). |
245-
| `UploadFiles` | Uploads all valid selected files. Fires the [OnUpload](slug:upload-events#onupload) event. |
243+
| `CancelFile(string fileId)` | Cancels the upload of the specified file and removes it from the collection. |
244+
| `ClearFiles()` | Clears all files from the list, both uploaded and in queue. |
245+
| `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). |
246+
| `PauseFile(string fileId)` | Pauses the upload of the file with the specified identifier, if it exists in the current collection. |
247+
| `RemoveFile(string fileId)` | Removes the file with the specified identifier from the collection. |
248+
| `ResumeFile(string fileId)` | Resumes the upload process for the specified file. |
249+
| `RetryFile(string fileId)` | Attempts to retry the upload of a file with the specified identifier. |
250+
| `UploadFiles()` | Uploads all valid selected files. Fires the [OnUpload](slug:upload-events#onupload) event. |
246251

247252
>caption Get reference to the Upload and execute methods
248253

‎components/upload/templates.md‎

Lines changed: 114 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Templates
33
page_title: Upload Templates
4-
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.
4+
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.
55
slug: upload-templates
66
tags: telerik,blazor,upload,templates
77
published: True
@@ -10,17 +10,124 @@ position: 30
1010

1111
# Upload Templates
1212

13+
The Upload component provides templates that allow you to customize the rendering of the select files button and the file list items.
14+
15+
* [SelectFilesButtonTemplate](#selectfilesbuttontemplate)
16+
* [FileTemplate](#filetemplate)
17+
* [FileInfoTemplate](#fileinfotemplate)
18+
19+
## SelectFilesButtonTemplate
20+
1321
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.
1422

1523
>caption Using Upload SelectFilesButtonTemplate
1624
1725
```RAZOR
18-
<TelerikUpload>
19-
<SelectFilesButtonTemplate>
20-
<TelerikSvgIcon Icon="@SvgIcon.Upload" />
21-
Click to Select Files for Upload
22-
</SelectFilesButtonTemplate>
23-
</TelerikUpload>
26+
<TelerikUpload>
27+
<SelectFilesButtonTemplate>
28+
<TelerikSvgIcon Icon="@SvgIcon.Upload" />
29+
Click to Select Files for Upload
30+
</SelectFilesButtonTemplate>
31+
</TelerikUpload>
32+
```
33+
34+
## FileTemplate
35+
36+
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.
37+
38+
The `FileTemplate` exposes a `context` of type `FileTemplateContext` that provides access to the file information through the `File` property.
39+
40+
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).
41+
42+
>caption Using Upload FileTemplate
43+
44+
```RAZOR
45+
<TelerikUpload @ref="@UploadRef" Files="@InitialFiles">
46+
<FileTemplate Context="fileContext">
47+
<div class="custom-file-item">
48+
<div class="file-badge">
49+
@fileContext.File.Extension.TrimStart('.').ToUpper()
50+
</div>
51+
<div class="file-info">
52+
<div><strong>@fileContext.File.Name@fileContext.File.Extension</strong></div>
53+
<div>Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB</div>
54+
</div>
55+
<TelerikButton Icon="@SvgIcon.X"
56+
FillMode="@ThemeConstants.Button.FillMode.Clear"
57+
OnClick="@(() => RemoveFile(fileContext.File.Id))">
58+
</TelerikButton>
59+
</div>
60+
</FileTemplate>
61+
</TelerikUpload>
62+
63+
<style>
64+
.custom-file-item {
65+
display: flex;
66+
align-items: center;
67+
gap: 10px;
68+
padding: 10px;
69+
border: 1px solid #ddd;
70+
border-radius: 4px;
71+
margin-bottom: 5px;
72+
}
73+
74+
.file-badge {
75+
width: 40px;
76+
height: 40px;
77+
background: #0d6efd;
78+
color: white;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
border-radius: 4px;
83+
font-size: 10px;
84+
font-weight: bold;
85+
}
86+
87+
.file-info {
88+
flex: 1;
89+
}
90+
</style>
91+
92+
@code {
93+
private TelerikUpload UploadRef { get; set; }
94+
95+
private List<UploadFileInfo> InitialFiles { get; set; } = new List<UploadFileInfo>()
96+
{
97+
new UploadFileInfo(){ Id="2", Name="Image", Extension=".jpg", Size = 1024 * 1024 * 4 },
98+
new UploadFileInfo(){ Id="3", Name="Presentation", Extension=".pptx", Size = 1024 * 1024 * 8 },
99+
new UploadFileInfo(){ Id="4", Name="Spreadsheet", Extension=".xlsx", Size = 1024 * 1024 * 3 }
100+
};
101+
102+
private void RemoveFile(string fileId)
103+
{
104+
UploadRef.RemoveFile(fileId);
105+
}
106+
}
107+
```
108+
109+
## FileInfoTemplate
110+
111+
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.
112+
113+
The `FileInfoTemplate` exposes a `context` of type `FileInfoTemplateContext` that provides access to the file information through the `File` property.
114+
115+
>caption Using Upload FileInfoTemplate
116+
117+
```RAZOR
118+
<TelerikUpload Files="@InitialFiles">
119+
<FileInfoTemplate Context="fileContext">
120+
<strong>File Name:</strong> @fileContext.File.Name <br />
121+
<strong>Size:</strong> @(fileContext.File.Size / 1024) KB
122+
</FileInfoTemplate>
123+
</TelerikUpload>
124+
125+
@code {
126+
private List<UploadFileInfo> InitialFiles { get; set; } = new List<UploadFileInfo>()
127+
{
128+
new UploadFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 }
129+
};
130+
}
24131
```
25132

26133
## See Also

0 commit comments

Comments
 (0)