diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md index 016c0c8268..e46c9ffbcc 100644 --- a/components/fileselect/overview.md +++ b/components/fileselect/overview.md @@ -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 diff --git a/components/fileselect/templates.md b/components/fileselect/templates.md index 034d012fc6..f6ce6755b5 100644 --- a/components/fileselect/templates.md +++ b/components/fileselect/templates.md @@ -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 -
- - - - Click to Select Files for Upload - - -
+ + + + Click to Select Files for Upload + + +``` + +## 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 + + +
+
+ @fileContext.File.Extension.TrimStart('.').ToUpper() +
+
+
@fileContext.File.Name@fileContext.File.Extension
+
Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB
+
+ + +
+ + + + + +@code { + private TelerikFileSelect FileSelectRef { get; set; } + + private List InitialFiles { get; set; } = new List() + { + 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 + + + File Name: @fileContext.File.Name
+ Size: @(fileContext.File.Size / 1024) KB + + + +@code { + private List InitialFiles { get; set; } = new List() + { + new FileSelectFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 } + }; +} ``` ## See Also diff --git a/components/upload/overview.md b/components/upload/overview.md index 20ce5b0520..e8dafad40b 100644 --- a/components/upload/overview.md +++ b/components/upload/overview.md @@ -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 diff --git a/components/upload/templates.md b/components/upload/templates.md index 7b1f0422ed..fb50f08297 100644 --- a/components/upload/templates.md +++ b/components/upload/templates.md @@ -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 - - - - Click to Select Files for Upload - - + + + + Click to Select Files for Upload + + +``` + +## 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 + + +
+
+ @fileContext.File.Extension.TrimStart('.').ToUpper() +
+
+
@fileContext.File.Name@fileContext.File.Extension
+
Size: @((fileContext.File.Size / 1024.0 / 1024.0).ToString("F2")) MB
+
+ + +
+ + + + + +@code { + private TelerikUpload UploadRef { get; set; } + + private List InitialFiles { get; set; } = new List() + { + 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 + + + File Name: @fileContext.File.Name
+ Size: @(fileContext.File.Size / 1024) KB + + + +@code { + private List InitialFiles { get; set; } = new List() + { + new UploadFileInfo(){ Id="1", Name="Report", Extension=".pdf", Size = 1024 * 1024 * 2 } + }; +} ``` ## See Also