You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The <ahref="https://www.telerik.com/blazor-ui/dropdownlist"target="_blank">Blazor DropDownList component</a> allows the user to choose an option from a predefined set of choices presented in a dropdown popup. The developer can control the [data]({%slug components/dropdownlist/databind%}), sizes, and various appearance options like class and [templates]({%slug components/dropdownlist/templates%}).
14
14
15
-
## Creating DropDownList
15
+
## Creating the DropDownList
16
16
17
17
1. Use the `TelerikDropDownList` tag to add the component to your razor page.
18
18
1. Populate its `Data` property with the collection of items you want to appear in the dropdown.
@@ -107,7 +107,7 @@ The following parameters enable you to customize the appearance of the Blazor Dr
107
107
You can find more options for customizing the DropDownList styling in the [Appearance article]({%slug dropdownlist-appearance%}).
108
108
109
109
110
-
### Popup settings
110
+
### Popup Settings
111
111
112
112
The popup of the component can be additionally customized via nested tags:
113
113
@@ -135,7 +135,7 @@ Add a reference to the component instance to use the [DropDownList's methods](/b
@@ -160,7 +160,7 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
160
160
161
161
* To display `DefaultText` - `Value` should be `0` or `null` depending on the data type you are using in the `ValueField` and the `DefaultText` should be defined.
162
162
163
-
* To display a selected item when the component renders - provide the `Value` of the desired element. Note that it must match an item of the component's data source.
163
+
* To display a selected item when the component renders - provide the `Value` of the desired element. Note that it must match an item of the component's data source.
164
164
165
165
166
166
## Examples
@@ -240,12 +240,10 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
240
240
## Next Steps
241
241
242
242
*[Binding the DropDownList to Data]({%slug components/dropdownlist/databind%})
243
-
244
243
*[Pre-Selecting Items for the User]({% slug dropdownlist-pre-select-item %})
description: Discover the Telerik UI for Blazor DropZone, learn how to create the component, integrate it with the Upload and FileSelect controls, use its templaes, parameters, style its appearance, and explore its examples.
The <ahref="https://www.telerik.com/blazor-ui/dropzone"target="_blank">Telerik UI for Blazor DropZone component</a> allows you to declare an external drop zone for an existing [FileSelect]({%slug fileselect-overview%}) or [Upload]({%slug upload-overview%}) component.
14
+
15
+
This integration enables the users to drag and drop one or multiple files to a designated space in their viewport. Dropping the files in the connected DropZone area will automatically select or upload them respectively.
16
+
17
+
## Creating Blazor DropZone
18
+
19
+
1. Add the DropZone to your Razor page by using the `TelerikDropZone` tag.
20
+
1. Set the `Id` parameter of the component.
21
+
1. Set the `DropZoneId` of the [FileSelect]({%slug fileselect-overview%}#fileselect-parameters) or [Upload]({%slug upload-overview%}#upload-parameters) component to match the `Id` of the DropZone.
22
+
1. (Optional) Add a note to the DropZone by using the `NoteText` setting.
23
+
24
+
>caption Basic configuration of the DropZone with the FileSelect component.
You can integrate the DropZone with both the [FileSelect]({%slug fileselect-overview%}) or [Upload]({%slug upload-overview%}) components. This will allow users to drop files and automatically select or upload them.
42
+
43
+
The connection is achieved by simply matching the value of the DropZone `Id` parameter with the `DropZoneId` parameter of the FileSelect or the Upload component.
44
+
45
+
Once the user drops a file in the external DropZone, the file is automatically sent to the connected FileSelect/Upload. This action effectively raises the `OnSelect` event of the [FileSelect]({%slug fileselect-events%}#onselect) or [Upload]({%slug upload-events%}#onselect). You can handle that to perform further actions with the dropped file(s).
46
+
47
+
## Template
48
+
49
+
The DropZone allows you to customize its rendering and appearance through a `Template` configuration. [Read more about using the DropZone template...]({%slug dropzone-template%})
50
+
51
+
## Parameters
52
+
53
+
The following table lists DropZone parameters. Check the [DropZone API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikDropZone) for a full list of properties, methods and events.
| Parameter | Type and Default Value | Description |
58
+
| --- | --- | --- |
59
+
|`Id`|`string`| The id of the DropZone. Assign the same value of the corresponding Upload or FileSelect component to the `DropZoneId`. |
60
+
|`Enabled`|`bool` <br /> (`true`) | Specifies whether the DropZone is enabled. |
61
+
|`HintText`|`string`| The text for the hint of the DropZone. If not provided, the DropZone will render a default value ("Drag and drop files here to upload"). The label text is also [localizable]({%slug globalization-localization%}).|
62
+
|`NoteText`|`string`| Optional content inside the DropZone. Use it to render any additional information below the hint. The label text is also [localizable]({%slug globalization-localization%}). |
63
+
64
+
### Styling and Appearance
65
+
66
+
The following parameters enable you to customize the appearance of the Blazor DropZone:
67
+
68
+
| Parameter | Type | Description |
69
+
| ----------- | ----------- | ----------- |
70
+
|`Class`|`string`| The CSS class that will be rendered on the main wrapping element of the DropZone (`<div class="k-external-dropzone">`). Use it for [overriding the theme or applying custom styles]({%slug themes-override%}). |
71
+
|`DragOverClass`|`string`| The CSS class that will be rendered on the main wrapping element of the DropZone when a file is dragged over it. Use it for [conditionally styling the component during a dragover action](https://demos.telerik.com/blazor-ui/dropzone/overview). |
72
+
|`Width`|`string`| The width of the DropZone. Accepts a valid CSS value (see the [Dimensions article]({%slug common-features/dimensions%})). |
73
+
|`Height`|`string`| The height of the DropZone. Accepts a valid CSS value (see the [Dimensions article]({%slug common-features/dimensions%})). |
74
+
75
+
## Next Steps
76
+
77
+
*[Using the DropZone Template for custom content]({%slug dropzone-template%})
78
+
79
+
## See Also
80
+
81
+
*[Live Demo: Blazor DropZone Overview and Key Features](https://demos.telerik.com/blazor-ui/dropzone/overview)
description: Learn more about how to modify the default content of the Telerik UI for Blazor DropZone by using its template and defining a custom layout.
The DropZone allows you to customize the default rendering of its content by using a `Template`.
14
+
15
+
The `Template` is a `RenderFragment` and allows you to add whatever custom content is required such as simple text, HTML elements, or other components.
16
+
17
+
>caption Use Template to add custom content in the DropZone
18
+
19
+
````CSHTML
20
+
<TelerikDropZone Id="@DropZoneId">
21
+
<Template>
22
+
<TelerikFontIcon Icon="@FontIcon.FileAdd" />
23
+
<span>Drop files here</span>
24
+
</Template>
25
+
</TelerikDropZone>
26
+
27
+
<TelerikFileSelect DropZoneId="@DropZoneId" />
28
+
29
+
@code {
30
+
private string DropZoneId => "my-dropzone";
31
+
}
32
+
````
33
+
34
+
## See Also
35
+
36
+
*[Live Demo: Implementing the Blazor DropZone Template](https://demos.telerik.com/blazor-ui/dropzone/template)
The FileSelect event handlers provide a [`FileSelectEventArgs` argument](/blazor-ui/api/Telerik.Blazor.Components.FileSelectEventArgs). It has a `Files` property, which is a `List<FileSelectFileInfo>`.
21
+
The FileSelect event handlers provide a [`FileSelectEventArgs` argument](/blazor-ui/api/Telerik.Blazor.Components.FileSelectEventArgs). `FileSelectEventArgs` has a `Files` property, which is a `List<FileSelectFileInfo>` type.
22
22
23
-
The `FileSelectFileInfo` type contains these properties:
23
+
The `FileSelectFileInfo` type contains the following properties:
`InvalidExtension` | `bool` | a boolean flag that shows if the file type is invalid
34
-
`InvalidMinFileSize` | `bool` | a boolean flag that shows if file size is below the minimum
35
-
`InvalidMaxFileSize` | `bool` | a boolean flag that shows if the file size exceeds the maximum
36
-
`Stream`| `FileInfoStream` | a [System.IO.Stream](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream) that can be used to load the file to memory, file system or other. Use it to **asynchronously**get the file contents as byte array.
29
+
`Id` | `string` | The unique file identifier.
30
+
`Name`|`string` | The file name.
31
+
`Size` |`long` | The file size in bytes.
32
+
`Extension` |`string` | The file extension.
33
+
`InvalidExtension` | `bool` | A Boolean flag that shows if the file type is invalid.
34
+
`InvalidMinFileSize` | `bool` | A Boolean flag that shows if file size is below the minimum.
35
+
`InvalidMaxFileSize` | `bool` | A Boolean flag that shows if the file size exceeds the maximum.
36
+
`Stream`| `FileInfoStream` | A [`System.IO.Stream`](https://docs.microsoft.com/en-us/dotnet/api/system.io.stream) that can be used to load the file to memory, file system, or other. Used for **asynchronously**getting the file contents as a byte array.
37
37
38
-
> Due to Blazor framework limitations, `FileInfoStream` does not support **synchronous** operations such as `Read`, `Seek`, `Flush` and `Write`. The methods exist, but will [throw an exception]({%slug fileselect-kb-stream-exception%}). A possible workaround is to copy the `FileInfoStream`**asynchronously** to another `Stream`via`CopyToAsync`. The `OnSelect` event example below demonstrates this.
38
+
> Due to the Blazor framework limitations, `FileInfoStream` does not support **synchronous** operations such as `Read`, `Seek`, `Flush`, and `Write`. The methods exist, but will [throw an exception]({%slug fileselect-kb-stream-exception%}). A possible workaround is to copy the `FileInfoStream`**asynchronously** to another `Stream`with`CopyToAsync`, as demonstrated by the `OnSelect` event example below.
39
39
40
40
## OnSelect
41
41
42
-
The `OnSelect` fires when one or multiple files have been selectedthrough the `Select files` button. Contains a list of fileInfo objects, allowing processing of the files.
42
+
The `OnSelect` fires when one or more files have been selected. The selection of files is achieved either through the **Select files** button or by dropping the files anywhere in the component.
43
43
44
-
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo).
44
+
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo), which contains a list of `FileInfo` objects that allow the processing of the files.
45
45
46
-
>caption Handle the OnSelect event of the FileSelect
46
+
>caption Handling the `OnSelect` event of the FileSelect
47
47
48
48
````CSHTML
49
49
@*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@
@@ -89,7 +89,7 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
89
89
await using FileStream fs = new FileStream(path, FileMode.Create);
Tokens.Add(file.Id, new CancellationTokenSource());
@@ -103,11 +103,11 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
103
103
104
104
## OnRemove
105
105
106
-
The `OnRemove` fires when a file has been removed from the list of selected files (by clicking the `x` icon or pressing `Del` key).
106
+
The `OnRemove` fires when a file has been removed from the list of selected files either by clicking the **x** icon or by pressing the `Del` key.
107
107
108
108
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo). As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one).
109
109
110
-
>caption Handle the OnRemove event of the FileSelect
110
+
>caption Handling the `OnRemove` event of the FileSelect
111
111
112
112
````CSHTML
113
113
@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@
@@ -143,7 +143,7 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
143
143
await Task.Delay(1);
144
144
145
145
var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
146
-
146
+
147
147
// Remove the file from the file system
148
148
File.Delete(path);
149
149
}
@@ -157,6 +157,6 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
Copy file name to clipboardExpand all lines: components/fileselect/overview.md
+10-4Lines changed: 10 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,11 @@ position: 0
10
10
11
11
# Blazor FileSelect Overview
12
12
13
-
The <ahref = "https://www.telerik.com/blazor-ui/fileselect"target="_blank">Blazor FileSelect component</a> helps users select one or multiple files from their local file system.
13
+
The <ahref = "https://www.telerik.com/blazor-ui/fileselect"target="_blank">Telerik UI for Blazor FileSelect component</a> helps users select one or more files from their local file system.
14
14
15
-
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 or save (upload) it to the server file system.
15
+
The Blazor FileSelect 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 or save (upload) it to the server file system.
@@ -59,6 +59,11 @@ In Blazor **Server** apps, the FileSelect uses the **SignalR WebSocket** to send
59
59
60
60
>tipThemaximumfilesizesupportedbytheframeworkuptill .NET5was2GBand .NET6 [removedthislimit](https://github.com/dotnet/aspnetcore/pull/33900). While [Telerik UI for Blazor supports .NET version 3.1]({%slug system-requirements%}), the FileSelect component will allow maximum file size of 2 GB.
61
61
62
+
## Drag-and-Drop File Support
63
+
64
+
TheFileSelectprovidesbuilt-infiledrag-and-dropsupport, whichallowsuserstodragoneormultiplefilesanddropthemanywhereinthecomponent. The [`OnSelect` event]({%slugfileselect-events%}#onselect) israisedupondroppingthefile. Youcanhandlethiseventtoperformfurtheractionswiththeselectedfile.
| `Capture` | `string` |The [`capture` HTMLattribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) of the `<input type="file" />` element. It enables users to provide a file directly from their device camera. |
0 commit comments