[4.1.] DropZone and drop support docs

_config.yml

@@ -329,6 +329,8 @@ navigation:
         title: "Drawer"
      "*dropdownlist":
         title: "DropDownList"
+     "*dropzone":
+        title: "DropZone"
      "*dropdowntree":
         isNew: true
         title: "DropDownTree"

components/dropdownlist/overview.md

@@ -1,6 +1,6 @@
 ---
 title: Overview
-page_title: DropDown List Overview
+page_title: DropDownList Overview
 description: Discover the Blazor DropdownList for Blazor and explore the examples.
 slug: components/dropdownlist/overview
 tags: telerik,blazor,dropdownlist,dropdown,list,overview
@@ -12,7 +12,7 @@ position: 0
 
 The <a href="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%}).
 
-## Creating DropDownList
+## Creating the DropDownList
 
 1. Use the `TelerikDropDownList` tag to add the component to your razor page.
 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
 You can find more options for customizing the DropDownList styling in the [Appearance article]({%slug dropdownlist-appearance%}).
 
 
-### Popup settings
+### Popup Settings
 
 The popup of the component can be additionally customized via nested tags:
 
@@ -135,7 +135,7 @@ Add a reference to the component instance to use the [DropDownList's methods](/b
 ````CSHTML
 <TelerikDropDownList @ref="@DropDownListRef"
                      Data="@DropDownListData"
-                     @bind-Value="@DropDownListValue" 
+                     @bind-Value="@DropDownListValue"
                      Width="300px"/>
 
 <TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>
@@ -160,7 +160,7 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
 
 * 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.
 
-* 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. 
+* 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.
 
 
 ## Examples
@@ -240,12 +240,10 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
 ## Next Steps
 
 * [Binding the DropDownList to Data]({%slug components/dropdownlist/databind%})
-
 * [Pre-Selecting Items for the User]({% slug dropdownlist-pre-select-item %})
 
-
 ## See Also
 
-  * [Data Binding]({%slug components/dropdownlist/databind%})
-  * [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/index)
-  * [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)
+* [Data Binding]({%slug components/dropdownlist/databind%})
+* [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/index)
+* [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)

components/dropzone/overview.md

@@ -0,0 +1,81 @@
+---
+title: Overview
+page_title: DropZone Overview and Key Features
+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.
+slug: dropzone-overview
+tags: telerik,blazor,dropzone,external,drag,drop,file,overview
+published: True
+position: 0
+---
+
+# Blazor DropZone Overview
+
+The <a href="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.
+
+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.
+
+## Creating Blazor DropZone
+
+1. Add the DropZone to your Razor page by using the `TelerikDropZone` tag.
+1. Set the `Id` parameter of the component.
+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.
+1. (Optional) Add a note to the DropZone by using the `NoteText` setting.
+
+>caption Basic configuration of the DropZone with the FileSelect component.
+````CSHTML
+<TelerikDropZone Id="@DropZoneId" NoteText="@NoteText" />
+
+<TelerikFileSelect DropZoneId="@DropZoneId" AllowedExtensions="@AllowedExtensions" />
+
+@code {
+    private string DropZoneId => "my-dropzone";
+
+    private string NoteText => "Allowed file types: DOCX and PDF";
+
+    private List<string> AllowedExtensions { get; set; } = new List<string>() { ".docx", ".pdf" };
+}
+````
+
+## Integration with the Upload and FileSelect
+
+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.
+
+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.
+
+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).
+
+## Template
+
+The DropZone allows you to customize its rendering and appearance through a `Template` configuration. [Read more about using the DropZone template...]({%slug dropzone-template%})
+
+## Parameters
+
+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.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default&nbsp;Value | Description |
+| --- | --- | --- |
+| `Id` | `string` | The id of the DropZone. Assign the same value of the corresponding Upload or FileSelect component to the `DropZoneId`. |
+| `Enabled` | `bool` <br /> (`true`) | Specifies whether the DropZone is enabled. |
+| `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%}).|
+| `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%}). |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor DropZone:
+
+|  Parameter | Type  | Description |
+| ----------- | ----------- | ----------- |
+| `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%}). |
+| `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). |
+| `Width` | `string` | The width of the DropZone. Accepts a valid CSS value (see the [Dimensions article]({%slug common-features/dimensions%})). |
+| `Height` | `string` | The height of the DropZone. Accepts a valid CSS value (see the [Dimensions article]({%slug common-features/dimensions%})). |
+
+## Next Steps
+
+* [Using the DropZone Template for custom content]({%slug dropzone-template%})
+
+## See Also
+
+* [Live Demo: Blazor DropZone Overview and Key Features](https://demos.telerik.com/blazor-ui/dropzone/overview)

components/dropzone/template.md

@@ -0,0 +1,36 @@
+---
+title: Template
+page_title: DropZone Content Template
+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.
+slug: dropzone-template
+tags: telerik,blazor,dropzone,external,drag,drop,file,template,custom,content
+published: True
+position: 5
+---
+
+# DropZone Template
+
+The DropZone allows you to customize the default rendering of its content by using a `Template`. 
+
+The `Template` is a `RenderFragment` and allows you to add whatever custom content is required such as simple text, HTML elements, or other components.
+
+>caption Use Template to add custom content in the DropZone
+
+````CSHTML
+<TelerikDropZone Id="@DropZoneId">
+    <Template>
+        <TelerikFontIcon Icon="@FontIcon.FileAdd" />
+        <span>Drop files here</span>
+    </Template>
+</TelerikDropZone>
+
+<TelerikFileSelect DropZoneId="@DropZoneId"  />
+
+@code {
+    private string DropZoneId => "my-dropzone";
+}
+````
+
+## See Also
+
+* [Live Demo: Implementing the Blazor DropZone Template](https://demos.telerik.com/blazor-ui/dropzone/template)

components/fileselect/events.md

@@ -12,38 +12,38 @@ position: 20
 
 This article describes the events and event arguments of the Telerik FileSelect for Blazor:
 
-* [OnSelect event](#onselect)
-* [OnRemove event](#onremove)
-* [FileSelectFileInfo class](#fileselectfileinfo)
+* [`OnSelect` event](#onselect)
+* [`OnRemove` event](#onremove)
+* [`FileSelectFileInfo` class](#fileselectfileinfo)
 
 ## FileSelectFileInfo
 
-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>`.
+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.
 
-The `FileSelectFileInfo` type contains these properties:
+The `FileSelectFileInfo` type contains the following properties:
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
 Property | Type | Description
 ---------|----------|---------
-`Id` | `string` | the unique file identifier
-`Name`|`string` | the file name
-`Size` |`long` | the file size in bytes
-`Extension` |`string` | the file extension
-`InvalidExtension` | `bool` | a boolean flag that shows if the file type is invalid
-`InvalidMinFileSize` | `bool` | a boolean flag that shows if file size is below the minimum
-`InvalidMaxFileSize` | `bool` | a boolean flag that shows if the file size exceeds the maximum
-`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.
+`Id` | `string` | The unique file identifier.
+`Name`|`string` | The file name.
+`Size` |`long` | The file size in bytes.
+`Extension` |`string` | The file extension.
+`InvalidExtension` | `bool` | A Boolean flag that shows if the file type is invalid.
+`InvalidMinFileSize` | `bool` | A Boolean flag that shows if file size is below the minimum.
+`InvalidMaxFileSize` | `bool` | A Boolean flag that shows if the file size exceeds the maximum.
+`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.
 
-> 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.
+> 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.
 
 ## 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 `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.
 
-The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo).
+The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo), which contains a list of `FileInfo` objects that allow the processing of the files.
 
->caption Handle the OnSelect event of the FileSelect
+>caption Handling the `OnSelect` event of the FileSelect
 
 ````CSHTML
 @*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)
         await using FileStream fs = new FileStream(path, FileMode.Create);
         await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
     }
-    
+
     private async Task ReadFile(FileSelectFileInfo file)
     {
         Tokens.Add(file.Id, new CancellationTokenSource());
@@ -103,11 +103,11 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
 
 ## 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).
+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.
 
 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).
 
->caption Handle the OnRemove event of the FileSelect
+>caption Handling the `OnRemove` event of the FileSelect
 
 ````CSHTML
 @*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)
             await Task.Delay(1);
 
             var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
-            
+
             // Remove the file from the file system
             File.Delete(path);
         }
@@ -157,6 +157,6 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
 
 ## See Also
 
-* [Live Demo: FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events)
-* [FileSelect Overview]({%slug fileselect-overview%})
-* [FileSelect Validation]({%slug fileselect-validation%})
+* [Live Demo: Blazor FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events)
+* [Telerik UI for Blazor FileSelect Overview]({%slug fileselect-overview%})
+* [Blazor FileSelect Validation]({%slug fileselect-validation%})

components/fileselect/overview.md

@@ -10,11 +10,11 @@ position: 0
 
 # Blazor FileSelect Overview
 
-The <a href = "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.
+The <a href = "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.
 
-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.
+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.
 
-## Comparison to the Upload
+## FileSelect vs. Upload
 
 @[template](/_contentTemplates/upload/notes.md#fileselect-upload-comparison)
 
@@ -28,7 +28,7 @@ The Telerik FileSelect for Blazor provides a [Stream](https://docs.microsoft.com
 
 Steps 2 and 3 are optional, but strongly recommended.
 
->caption Using FileSelect
+>caption Using the FileSelect
 
 ````CS
 <TelerikFileSelect AllowedExtensions="@AllowedExtensions"
@@ -59,6 +59,11 @@ In Blazor **Server** apps, the FileSelect uses the **SignalR WebSocket** to send
 
 >tip The maximum file size supported by the framework up till .NET 5 was 2 GB and .NET 6 [removed this limit](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.
 
+## Drag-and-Drop File Support
+
+The FileSelect provides built-in file drag-and-drop support, which allows users to drag one or multiple files and drop them anywhere in the component. The [`OnSelect` event]({%slug fileselect-events%}#onselect) is raised upon dropping the file. You can handle this event to perform further actions with the selected file.
+
+Additionally, you may define an external drop zone by using the [Telerik UI for Blazor DropZone component]({%slug dropzone-overview%}).
 
 ## Validation
 
@@ -80,6 +85,7 @@ The following table lists the FileSelect parameters. Also check the [FileSelect
 | `AllowedExtensions` | `List<string>` | The list of allowed file types. The component will check if the selected files are compliant **after selection**. Compare with `Accept`. Read more at [Validation]({%slug fileselect-validation%}). |
 | `Capture` | `string` | The [`capture` HTML attribute](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. |
 | `Class` | `string` | Renders a custom CSS class to the `<div class="k-upload">` element. (The FileSelect reuses the Upload HTML rendering.) |
+| `DropZoneId` | `string` | The id that is used to connect the FileSelect to an external [DropZone]({%slug dropzone-overview%}). Assign a value matching the `Id` of the DropZone you are connecting the component with. |
 | `Enabled` | `bool`<br />(`true`) | Enables file selection. |
 | `Id` | `string` | Renders an `id` attribute to the `<input type="file" />` element. Can be used together with a `<label>`. |
 | `MinFileSize` | `int?` | Sets the minimum allowed file size in bytes. Read more at [Validation]({%slug fileselect-validation%}). |