From 62253559e53ec29de956b67792b7affc887f7ecd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 7 Jan 2022 16:16:10 +0200 Subject: [PATCH 1/4] docs(fileselect):draft docs --- components/fileselect/events.md | 70 +++++++++++++++++++++++++++++ components/fileselect/overview.md | 44 ++++++++++++++++++ components/fileselect/validation.md | 48 ++++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 components/fileselect/events.md create mode 100644 components/fileselect/overview.md create mode 100644 components/fileselect/validation.md diff --git a/components/fileselect/events.md b/components/fileselect/events.md new file mode 100644 index 0000000000..1a399c616c --- /dev/null +++ b/components/fileselect/events.md @@ -0,0 +1,70 @@ +--- +title: Events +page_title: FileSelect - Events +description: Events in the FileSelect for Blazor. +slug: fileselect-events +tags: telerik,blazor,upload,async,events +published: true +position: 20 +--- + +# FileSelect Events + +This article explains the events available in the Telerik FileSelect for Blazor: + +* [OnSelect](#onselect) +* [OnRemove](#onremove) + +## OnSelect + +The `OnSelect` fires when one or multiple files have been selected through the `Select files` button. Contains a list of fileInfo objects, allowing processing of the files. + +The event handler receives a `FileSelectEventArgs` object. Its `Files` field is a collection of `FileSelectFileInfo` objects. They describe each selected file and allow its processing. + +The `FileSelectFileInfo` object contains the following properties: + +* `Id`- `string` - the unique identifier of the file. +* `Name`- `string` - the file name. +* `Size` - `long` - the file size in bytes. +* `Extension` - `string` - the file extension. +* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is * `within the specified ones. +* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the * `minimum. +* `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. +* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or * `other. It's used to asynchronously get the byte array data of the file. + +>caption Handle the OnSelect event of the FileSelect + +````CSHTML +```` + +@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) + + +## OnRemove + +The `OnRemove` fires when a file has been removed from the list of selected files (by clicking the `x` icon or pressing `Del` key). Contains the removed fileInfo object. + +The event handler receives a `FileSelectEventArgs` object which has a collection of `FileSelectFileInfo` objects. As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one) and it has the following fields: + +* `Id`- `string` - the unique identifier of the file. +* `Name`- `string` - the file name. +* `Size` - `long` - the file size in bytes. +* `Extension` - `string` - the file extension. +* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is * `within the specified ones. +* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the * `minimum. +* `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. +* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or * `other. It's used to asynchronously get the byte array data of the file. + +>caption Handle the OnRemove event of the FileSelect + +````CSHTML +```` + +@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) + + +## See Also + +* [Live Demo: FileSelect Events](https://demos.telerik.com/blazor-ui/upload/events) +* [FileSelect Overview]({%slug fileselect-overview%}) +* [FileSelect Validation]({%slug fileselect-validation%}) diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md new file mode 100644 index 0000000000..eb558fe760 --- /dev/null +++ b/components/fileselect/overview.md @@ -0,0 +1,44 @@ +--- +title: Overview +page_title: FileSelect Overview +description: Overview of the FileSelect for Blazor. +slug: fileselect-overview +tags: telerik,blazor,fileselect,async,overview +published: True +position: 0 +--- + +# FileSelect Overview + +FileSelect component helps users select single or multiple files from their local file systems. The component is especially useful when you want full control over the process of creating the server requests and sent forms. + + +#### To use a Telerik FileSelect for Blazor + + +>caption Component namespace and reference + +````CSHTML + + +@code{ + Telerik.Blazor.Components.TelerikFileSelect FileSelectRef { get; set; } +} +```` + +## Features + +The FileSelect component provides the following key features: + +* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the FileSelect component +* `Enabled` - `bool` - enables or disables the component. +* `Multiple` - `bool` - controls whether selection of multiple files at once is allowed. Default value is true`. +* `AllowedExtensions` - `List` - a list of allowed file extensions. Read more in [Validation article]({%slug fileselect-validation%}). +* `MinFileSize` - `int?` - the minimum file size in bytes allowed for upload. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). +* `MaxFileSize`- `int?` - the maximum file size in bytes. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). + +## See Also + +* [Live Demo: FileSelect Overview](https://demos.telerik.com/blazor-ui/fileselect/overview) +* [FileSelect Validation]({%slug fileselect-validation%}) +* [FileSelect Events]({%slug fileselect-events%}) \ No newline at end of file diff --git a/components/fileselect/validation.md b/components/fileselect/validation.md new file mode 100644 index 0000000000..b8fc6f3620 --- /dev/null +++ b/components/fileselect/validation.md @@ -0,0 +1,48 @@ +--- +title: Validation +page_title: FileSelect - Validation +description: Validate chosen and uploaded files in the File FileSelect for Blazor. +slug: fileselect-validation +tags: telerik,blazor,fileselect,async,validate,validation +published: true +position: 10 +--- + +# FileSelect - Selected Files Validation + +Files must be validated when uploading, and the process has two parts: + +* client validation - performed by the Telerik FileSelect component +* server validation - must be implemented in the application endpoints + +The Telerik FileSelect component offers parameters to validate the file selection on the client: + +* `AllowedExtensions` - `List` - a list of extensions that the user can select. Choosing different files will mark them as invalid in the UI and will not upload them. Its default is an empty list, which allows all extensions. +* `MaxFileSize`- `int?` - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI and will not upload. +* `MinFileSize`- `int?` - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI and will not upload. + +>caption Client validation in the Telerik FileSelect component + +For brevity, this sample does not showcase a controller that consumes these files. You can find an example in the FileSelect Overview article. + +````CSHTML +@* Some images are only allowed, min size 1KB, max size 2MB + This sample does not showcase actual upload of these files for brevity + For such an example see https://docs.telerik.com/blazor-ui/components/fileselect/events +*@ + + + +```` + +@[template](/_contentTemplates/upload/notes.md#server-security-note) + + +## See Also + +* [Live Demo: FileSelect Validation](https://demos.telerik.com/blazor-ui/upload/validation) +* [FileSelect Overview]({%slug fileselect-overview%}) +* [FileSelect Events]({%slug fileselect-events%}) + From 5b3e6f58075e416caf0de341405c6e514977a0cd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 13 Jan 2022 20:13:07 +0200 Subject: [PATCH 2/4] docs(fileselect):updates --- components/fileselect/events.md | 83 ++++++++++++++++++++++++++++- components/fileselect/overview.md | 4 +- components/fileselect/validation.md | 35 ++++++++---- 3 files changed, 109 insertions(+), 13 deletions(-) diff --git a/components/fileselect/events.md b/components/fileselect/events.md index 1a399c616c..0cf2be65be 100644 --- a/components/fileselect/events.md +++ b/components/fileselect/events.md @@ -35,6 +35,47 @@ The `FileSelectFileInfo` object contains the following properties: >caption Handle the OnSelect event of the FileSelect ````CSHTML +*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@ + +@using System.IO +@using Microsoft.AspNetCore.Hosting +@using System.Threading +@using Telerik.Blazor.Components.FileSelect + +@inject IWebHostEnvironment HostingEnvironment + +
+ + +
+ Expected files: JPG, PNG, GIF +
+
+ +@code { + public List AllowedExtensions { get; set; } = new List() { ".jpg", ".png", ".gif" }; + public Dictionary Tokens { get; set; } = new Dictionary(); + + private void HandleFiles(FileSelectEventArgs args) + { + foreach (var file in args.Files) + { + if (!file.InvalidExtension) + { + _ = UploadFile(file); + } + } + } + + private async Task UploadFile(FileSelectFileInfo file) + { + Tokens.Add(file.Id, new CancellationTokenSource()); + var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name); + await using FileStream fs = new FileStream(path, FileMode.Create); + await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token); + } +} ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) @@ -58,6 +99,46 @@ The event handler receives a `FileSelectEventArgs` object which has a collection >caption Handle the OnRemove event of the FileSelect ````CSHTML +@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@ + +@using System.IO +@using Microsoft.AspNetCore.Hosting +@using System.Threading +@using Telerik.Blazor.Components.FileSelect + +@inject IWebHostEnvironment HostingEnvironment + +
+ + +
+ Expected files: JPG, PNG, GIF +
+
+ +@code { + public List AllowedExtensions { get; set; } = new List() { ".jpg", ".png", ".gif" }; + public Dictionary Tokens { get; set; } = new Dictionary(); + + private async Task HandleRemoveFiles(FileSelectEventArgs args) + { + foreach (var file in args.Files) + { + // If you're still uploading the file, cancel the process first. + Tokens[file.Id].Cancel(); + Tokens.Remove(file.Id); + + await Task.Delay(1); + + var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name); + + // Remove the file from the file system + File.Delete(path); + } + + } +} ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) @@ -65,6 +146,6 @@ The event handler receives a `FileSelectEventArgs` object which has a collection ## See Also -* [Live Demo: FileSelect Events](https://demos.telerik.com/blazor-ui/upload/events) +* [Live Demo: FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events) * [FileSelect Overview]({%slug fileselect-overview%}) * [FileSelect Validation]({%slug fileselect-validation%}) diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md index eb558fe760..fa837ca7b7 100644 --- a/components/fileselect/overview.md +++ b/components/fileselect/overview.md @@ -12,9 +12,11 @@ position: 0 FileSelect component helps users select single or multiple files from their local file systems. The component is especially useful when you want full control over the process of creating the server requests and sent forms. +The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-6.0) for each selected file, so that you can save it to memory, a file system or other destination. -#### To use a Telerik FileSelect for Blazor +>tip The maximum file size supported by the framework up till .NET 5 is 2 GB and as of .NET 6 [this limit is removed](https://github.com/dotnet/aspnetcore/pull/33900). At the time of introducing the component, Telerik UI for Blazor supports .NET versions 3.1.x - 6 and for multi-targeting purposes the FileSelect component allows maximum file size of 2 GB. +#### To use a Telerik FileSelect for Blazor >caption Component namespace and reference diff --git a/components/fileselect/validation.md b/components/fileselect/validation.md index b8fc6f3620..b7b370d0ba 100644 --- a/components/fileselect/validation.md +++ b/components/fileselect/validation.md @@ -1,7 +1,7 @@ --- title: Validation page_title: FileSelect - Validation -description: Validate chosen and uploaded files in the File FileSelect for Blazor. +description: Validate the selected files in the FileSelect for Blazor. slug: fileselect-validation tags: telerik,blazor,fileselect,async,validate,validation published: true @@ -18,23 +18,36 @@ Files must be validated when uploading, and the process has two parts: The Telerik FileSelect component offers parameters to validate the file selection on the client: * `AllowedExtensions` - `List` - a list of extensions that the user can select. Choosing different files will mark them as invalid in the UI and will not upload them. Its default is an empty list, which allows all extensions. -* `MaxFileSize`- `int?` - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI and will not upload. * `MinFileSize`- `int?` - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI and will not upload. +* `MaxFileSize`- `int?` - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI and will not upload. >caption Client validation in the Telerik FileSelect component -For brevity, this sample does not showcase a controller that consumes these files. You can find an example in the FileSelect Overview article. +For brevity, this sample does not showcase actual upload of the files. You can find an example in the [FileSelect Events article]({%slug fileselect-events%}). ````CSHTML -@* Some images are only allowed, min size 1KB, max size 2MB - This sample does not showcase actual upload of these files for brevity - For such an example see https://docs.telerik.com/blazor-ui/components/fileselect/events +@* Some images are only allowed, min size 1KB, max size 4MB + This sample does not showcase actual upload of these files for brevity + For such an example see https://docs.telerik.com/blazor-ui/components/fileselect/events *@ - - +
+ + +
+ Expected files: JPG, PNG, JPEG between 1KB and 4MB. +
+
+ +@code { + public List AllowedExtensions { get; set; } = new List() { ".jpg", ".png", ".jpeg" }; + + public int MinSize { get; set; } = 1024; + + public int MaxSize { get; set; } = 4 * 1024 * 1024; +} ```` @[template](/_contentTemplates/upload/notes.md#server-security-note) @@ -42,7 +55,7 @@ For brevity, this sample does not showcase a controller that consumes these file ## See Also -* [Live Demo: FileSelect Validation](https://demos.telerik.com/blazor-ui/upload/validation) +* [Live Demo: FileSelect Validation](https://demos.telerik.com/blazor-ui/fileselect/validation) * [FileSelect Overview]({%slug fileselect-overview%}) * [FileSelect Events]({%slug fileselect-events%}) From cdab298d14dd78765f47203f31ed6b4f26d728c9 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 17 Jan 2022 15:47:01 +0200 Subject: [PATCH 3/4] docs(fileselect):final --- _config.yml | 2 ++ components/fileselect/events.md | 14 +++++++------- components/fileselect/overview.md | 28 +++++++++++++++++++++++++--- components/fileselect/validation.md | 11 ++++------- 4 files changed, 38 insertions(+), 17 deletions(-) diff --git a/_config.yml b/_config.yml index e8851b8f7b..dcb524f376 100644 --- a/_config.yml +++ b/_config.yml @@ -306,6 +306,8 @@ navigation: title: "DropDownTree" "*editor": title: "Editor" + "*fileselect": + title: "FileSelect" "*form": title: "Form" "*flatcolorpicker": diff --git a/components/fileselect/events.md b/components/fileselect/events.md index 0cf2be65be..8efb4d4106 100644 --- a/components/fileselect/events.md +++ b/components/fileselect/events.md @@ -27,10 +27,10 @@ The `FileSelectFileInfo` object contains the following properties: * `Name`- `string` - the file name. * `Size` - `long` - the file size in bytes. * `Extension` - `string` - the file extension. -* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is * `within the specified ones. -* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the * `minimum. +* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is not within the specified ones. +* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the minimum. * `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. -* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or * `other. It's used to asynchronously get the byte array data of the file. +* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. >caption Handle the OnSelect event of the FileSelect @@ -85,16 +85,16 @@ The `FileSelectFileInfo` object contains the following properties: The `OnRemove` fires when a file has been removed from the list of selected files (by clicking the `x` icon or pressing `Del` key). Contains the removed fileInfo object. -The event handler receives a `FileSelectEventArgs` object which has a collection of `FileSelectFileInfo` objects. As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one) and it has the following fields: +The event handler receives a `FileSelectEventArgs` object. Its `Files` field is a collection of `FileSelectFileInfo` objects. As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one) and it has the following fields: * `Id`- `string` - the unique identifier of the file. * `Name`- `string` - the file name. * `Size` - `long` - the file size in bytes. * `Extension` - `string` - the file extension. -* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is * `within the specified ones. -* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the * `minimum. +* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is not within the specified ones. +* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the minimum. * `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. -* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or * `other. It's used to asynchronously get the byte array data of the file. +* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. >caption Handle the OnRemove event of the FileSelect diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md index fa837ca7b7..7507345849 100644 --- a/components/fileselect/overview.md +++ b/components/fileselect/overview.md @@ -10,7 +10,7 @@ position: 0 # FileSelect Overview -FileSelect component helps users select single or multiple files from their local file systems. The component is especially useful when you want full control over the process of creating the server requests and sent forms. +The Blazor FileSelect component helps users select single or multiple files from their local file systems. It provides UI for selecting the files and allows the application logic to handle the actual upload as desired. The component is especially useful when you want full control over the process of creating the server requests and sent forms. The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-6.0) for each selected file, so that you can save it to memory, a file system or other destination. @@ -18,6 +18,28 @@ The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com #### To use a Telerik FileSelect for Blazor +1. Add the `TelerikFileSelect` tag +1. Configure the desired settings through the corresponding [parameters it exposes](#features) + +````CSHTML +@* Basic FileSelect that accepts DOCX and PDF files. + This sample does not showcase actual upload of these files for brevity + For such an example see https://docs.telerik.com/blazor-ui/components/fileselect/events +*@ + +
+ + +
+ Expected files: DOCX and PDF +
+
+ +@code { + public List AllowedExtensions { get; set; } = new List() { ".docx", ".pdf"}; +} +```` + >caption Component namespace and reference ````CSHTML @@ -32,9 +54,9 @@ The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com The FileSelect component provides the following key features: -* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the FileSelect component +* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the FileSelect component. * `Enabled` - `bool` - enables or disables the component. -* `Multiple` - `bool` - controls whether selection of multiple files at once is allowed. Default value is true`. +* `Multiple` - `bool` - controls whether selection of multiple files at once is allowed. Default value is `true`. * `AllowedExtensions` - `List` - a list of allowed file extensions. Read more in [Validation article]({%slug fileselect-validation%}). * `MinFileSize` - `int?` - the minimum file size in bytes allowed for upload. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). * `MaxFileSize`- `int?` - the maximum file size in bytes. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). diff --git a/components/fileselect/validation.md b/components/fileselect/validation.md index b7b370d0ba..884f5a7ed5 100644 --- a/components/fileselect/validation.md +++ b/components/fileselect/validation.md @@ -17,19 +17,16 @@ Files must be validated when uploading, and the process has two parts: The Telerik FileSelect component offers parameters to validate the file selection on the client: -* `AllowedExtensions` - `List` - a list of extensions that the user can select. Choosing different files will mark them as invalid in the UI and will not upload them. Its default is an empty list, which allows all extensions. -* `MinFileSize`- `int?` - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI and will not upload. -* `MaxFileSize`- `int?` - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI and will not upload. +* `AllowedExtensions` - `List` - a list of extensions that the user can select. Choosing different files will mark them as invalid in the UI. Its default is an empty list, which allows all extensions. +* `MinFileSize`- `int?` - the minimum size of a file in bytes. Files with a smaller size will be marked as invalid in the UI. +* `MaxFileSize`- `int?` - the maximum size of a file in bytes. Files with a larger size will be marked as invalid in the UI. >caption Client validation in the Telerik FileSelect component For brevity, this sample does not showcase actual upload of the files. You can find an example in the [FileSelect Events article]({%slug fileselect-events%}). ````CSHTML -@* Some images are only allowed, min size 1KB, max size 4MB - This sample does not showcase actual upload of these files for brevity - For such an example see https://docs.telerik.com/blazor-ui/components/fileselect/events -*@ +@* Some images are only allowed, min size 1KB, max size 4MB *@
Date: Tue, 18 Jan 2022 12:36:47 +0200 Subject: [PATCH 4/4] docs(fileselect):updates --- components/fileselect/events.md | 36 ++++++++++++++++------------- components/fileselect/overview.md | 17 ++++++++------ components/fileselect/validation.md | 2 +- components/upload/validation.md | 2 +- 4 files changed, 32 insertions(+), 25 deletions(-) diff --git a/components/fileselect/events.md b/components/fileselect/events.md index 8efb4d4106..d945761a03 100644 --- a/components/fileselect/events.md +++ b/components/fileselect/events.md @@ -23,14 +23,16 @@ The event handler receives a `FileSelectEventArgs` object. Its `Files` field is The `FileSelectFileInfo` object contains the following properties: -* `Id`- `string` - the unique identifier of the file. -* `Name`- `string` - the file name. -* `Size` - `long` - the file size in bytes. -* `Extension` - `string` - the file extension. -* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is not within the specified ones. -* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the minimum. -* `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. -* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. +Property | Type | Description +---------|----------|--------- +`Id` | `string` | the unique identifier of the file. +`Name`|`string` | the file name. +`Size` |`long` | the file size in bytes. +`Extension` |`string` | the file extension. +`InvalidExtension` | `bool` | a boolean flag indicating whether the file has an extension that is not within the specified ones. +`InvalidMinFileSize` | `bool` | a boolean flag indicating whether the file has a size below the minimum. +`InvalidMaxFileSize` | `bool` | a boolean flag indicating whether the file exceeds the max file size. +`Stream`| `FileInfoStream` | a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. >caption Handle the OnSelect event of the FileSelect @@ -87,14 +89,16 @@ The `OnRemove` fires when a file has been removed from the list of selected file The event handler receives a `FileSelectEventArgs` object. Its `Files` field is a collection of `FileSelectFileInfo` objects. As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one) and it has the following fields: -* `Id`- `string` - the unique identifier of the file. -* `Name`- `string` - the file name. -* `Size` - `long` - the file size in bytes. -* `Extension` - `string` - the file extension. -* `InvalidExtension` - `bool` - a boolean flag indicating whether the file has an extension that is not within the specified ones. -* `InvalidMinFileSize` - `bool` - a boolean flag indicating whether the file has a size below the minimum. -* `InvalidMaxFileSize` - `bool` - a boolean flag indicating whether the file exceeds the max file size. -* `Stream`- `FileInfoStream` - a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. +Property | Type | Description +---------|----------|--------- +`Id`| `string` | the unique identifier of the file. +`Name` | `string` | the file name. +`Size` | `long` | the file size in bytes. +`Extension` | `string` | the file extension. +`InvalidExtension` | `bool` | a boolean flag indicating whether the file has an extension that is not within the specified ones. +`InvalidMinFileSize` | `bool` | a boolean flag indicating whether the file has a size below the minimum. +`InvalidMaxFileSize` | `bool` | a boolean flag indicating whether the file exceeds the max file size. +`Stream` | `FileInfoStream` | a stream that can be used to upload the file to memory, file system or other. It's used to asynchronously get the byte array data of the file. >caption Handle the OnRemove event of the FileSelect diff --git a/components/fileselect/overview.md b/components/fileselect/overview.md index 7507345849..96fe485627 100644 --- a/components/fileselect/overview.md +++ b/components/fileselect/overview.md @@ -12,7 +12,7 @@ position: 0 The Blazor FileSelect component helps users select single or multiple files from their local file systems. It provides UI for selecting the files and allows the application logic to handle the actual upload as desired. The component is especially useful when you want full control over the process of creating the server requests and sent forms. -The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-6.0) for each selected file, so that you can save it to memory, a file system or other destination. +The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-6.0) for each selected file, so that you can manipulate the file in-memory, save it to the file system or send it to another destination. >tip The maximum file size supported by the framework up till .NET 5 is 2 GB and as of .NET 6 [this limit is removed](https://github.com/dotnet/aspnetcore/pull/33900). At the time of introducing the component, Telerik UI for Blazor supports .NET versions 3.1.x - 6 and for multi-targeting purposes the FileSelect component allows maximum file size of 2 GB. @@ -50,16 +50,19 @@ The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com } ```` + ## Features The FileSelect component provides the following key features: -* `Class` - `string` - the CSS class that will be rendered on the main wrapping element of the FileSelect component. -* `Enabled` - `bool` - enables or disables the component. -* `Multiple` - `bool` - controls whether selection of multiple files at once is allowed. Default value is `true`. -* `AllowedExtensions` - `List` - a list of allowed file extensions. Read more in [Validation article]({%slug fileselect-validation%}). -* `MinFileSize` - `int?` - the minimum file size in bytes allowed for upload. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). -* `MaxFileSize`- `int?` - the maximum file size in bytes. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). +Parameter | Type | Description +---------|----------|--------- +`Class` | `string` | the CSS class that will be rendered on the main wrapping element of the FileSelect component. +`Enabled` | `bool` | enables or disables the component. +`Multiple` | `bool` | controls whether selection of multiple files at once is allowed. Default value is `true`. +`AllowedExtensions` | `List` | a list of allowed file extensions. Read more in [Validation article]({%slug fileselect-validation%}). +`MinFileSize` | `int?` | the minimum file size in bytes allowed for upload. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). +`MaxFileSize`| `int?` | the maximum file size in bytes. Default is null. Read more in [Validation article]({%slug fileselect-validation%}). ## See Also diff --git a/components/fileselect/validation.md b/components/fileselect/validation.md index 884f5a7ed5..69ded82464 100644 --- a/components/fileselect/validation.md +++ b/components/fileselect/validation.md @@ -10,7 +10,7 @@ position: 10 # FileSelect - Selected Files Validation -Files must be validated when uploading, and the process has two parts: +If you want to validate the files when uploading, you should implement the validation in two parts: * client validation - performed by the Telerik FileSelect component * server validation - must be implemented in the application endpoints diff --git a/components/upload/validation.md b/components/upload/validation.md index 42a9502416..e097ce3d2a 100644 --- a/components/upload/validation.md +++ b/components/upload/validation.md @@ -10,7 +10,7 @@ position: 2 # Validate Uploaded Files -Files must be validated when uploading, and the process has two parts: +If you want to validate the files when uploading, you should implement the validation in two parts: * client validation - performed by the Telerik Upload component * server validation - must be implemented in the application endpoints