Skip to content

Commit 72689c4

Browse files
dimodidimodi
committed
kb(DropZone): Add KB about a full page DropZone
1 parent 628914f commit 72689c4

File tree

2 files changed

+209
-0
lines changed

2 files changed

+209
-0
lines changed

‎components/dropzone/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,4 @@ The following parameters enable you to customize the appearance of the Blazor Dr
8080
## See Also
8181

8282
* [Live Demo: Blazor DropZone Overview and Key Features](https://demos.telerik.com/blazor-ui/dropzone/overview)
83+
* [Display DropZone Over the Whole Page](slug:dropzone-kb-display-over-whole-page)

‎knowledge-base/dropzone-display-over-whole-page.md‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
---
2+
title: Display DropZone Over the Whole Page
3+
description: Learn how to show and expand a Telerik DropZone for Blazor over the whole page, so that the user can drag and drop a file from their device anywhere on the screen.
4+
type: how-to
5+
page_title: How To Display DropZone Over the Whole Page
6+
slug: dropzone-kb-display-over-whole-page
7+
tags: telerik, blazor, dropzone, fileselect, upload
8+
ticketid: 1703123
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>DropZone for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This article answers the following questions:
26+
27+
* How to display a Telerik Blazor DropZone over the whole web page?
28+
* How to expand a DropZone component, so that it occupies the full width and height of the browser viewport? This should happen when the user drags a file from their device over the web page.
29+
30+
## Solution
31+
32+
To display a Telerik DropZone over the whole web page, use the component [`Class` parameter](slug:dropzone-overview#styling-and-appearance) to apply styles that expand the DropZone to cover (overlay) all the other content.
33+
34+
To show the DropZone only while the user is dragging a file over the page, use the [`dragover`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event) and [`dragleave`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event) JavaScript events of the `document` or another suitable element. [Call a .NET method with JSInterop](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) that renders the DropZone conditionally.
35+
36+
The following example can use either the Telerik FileSelect or Upload component for Blazor. The image preview is optional and its purpose is to demonstrate successful file handling by the DropZone. When using the FileSelect in a Blazor Server app, make sure to [increase the maximum SignalR message size](slug:common-kb-increase-signalr-max-message-size).
37+
38+
Make sure to rename the `__Main` type in the `DotNetObjectReference` to the actual Razor component that you are using.
39+
40+
>caption Display DropZone over the whole page during file drag
41+
42+
````RAZOR
43+
@using System.IO
44+
45+
@implements IDisposable
46+
47+
@inject IJSRuntime js
48+
49+
@if (ShouldRenderDropZone)
50+
{
51+
<TelerikDropZone Id="@DropZoneId" Height="100%" Class="full-page-dropzone" />
52+
}
53+
54+
<style>
55+
.full-page-dropzone {
56+
position: fixed;
57+
top: 0;
58+
left: 0;
59+
width: 100vw;
60+
height: 100vh;
61+
z-index: 11000; /* Telerik Window z-indexes start from 10,000. LoaderContainer z-index is 20,000. */
62+
}
63+
64+
.full-page-dropzone .k-dropzone-inner {
65+
background-color: #fafafa88;
66+
}
67+
</style>
68+
69+
<TelerikForm Model="@Employee"
70+
Width="600px">
71+
<FormItems>
72+
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name"></FormItem>
73+
<FormItem Field="@nameof(Person.LastName)" LabelText="Last Name"></FormItem>
74+
<FormItem Field="@nameof(Person.BirthDate)" LabelText="Birth Date"></FormItem>
75+
<FormItem Field="@nameof(Person.Photo)">
76+
<Template>
77+
<label for="photo" class="k-label k-form-label">Photo</label>
78+
<div class="k-form-field-wrap">
79+
@if (!string.IsNullOrEmpty(Employee.Photo))
80+
{
81+
<img src="@Employee.Photo" style="max-width:100px;max-height:100px;" />
82+
}
83+
<TelerikFileSelect AllowedExtensions="@ImageFileExtensions"
84+
DropZoneId="@DropZoneId"
85+
Id="photo"
86+
MaxFileSize="@MaxImageSize"
87+
Multiple="false"
88+
OnSelect="@OnFileSelect"
89+
OnRemove="@((FileSelectEventArgs args) => Employee.Photo = string.Empty)"/>
90+
</div>
91+
</Template>
92+
</FormItem>
93+
</FormItems>
94+
</TelerikForm>
95+
96+
@* Move JavaScript code to a separate JS file *@
97+
<script suppress-error="BL9992">
98+
var dotNet;
99+
var dragTimer;
100+
101+
function saveDotNetRef(dotNetRef) {
102+
dotNet = dotNetRef;
103+
document.addEventListener("dragover", onDragOver);
104+
document.addEventListener("dragleave", onDragLeave);
105+
}
106+
107+
function toggleDropZone(flag) {
108+
dotNet.invokeMethodAsync("ToggleDropZone", flag);
109+
}
110+
111+
function onDragOver(e) {
112+
var dt = e.dataTransfer;
113+
if (dt && dt.types && (dt.types.indexOf ? dt.types.indexOf("Files") != -1 : dt.types.contains("Files"))) {
114+
toggleDropZone(true);
115+
window.clearTimeout(dragTimer);
116+
}
117+
}
118+
119+
function onDragLeave(e) {
120+
dragTimer = window.setTimeout(function() {
121+
toggleDropZone(false);
122+
}, 200);
123+
}
124+
125+
function detachDragEvents() {
126+
document.removeEventListener("dragover", onDragOver);
127+
document.removeEventListener("dragleave", onDragLeave);
128+
}
129+
</script>
130+
131+
@code {
132+
// Replace __Main with your Razor component type
133+
private DotNetObjectReference<__Main>? DotNetRef { get; set; }
134+
135+
private string DropZoneId => "my-dropzone";
136+
137+
private bool ShouldRenderDropZone { get; set; }
138+
139+
private List<string> ImageFileExtensions { get; set; } = new List<string>() { ".jpg", ".jpeg", ".png", ".gif" };
140+
private long? MaxImageSize { get; set; } = 16 * 1024 * 1024;
141+
142+
private async Task OnFileSelect(FileSelectEventArgs args)
143+
{
144+
FileSelectFileInfo file = args.Files.First();
145+
146+
if (!file.InvalidExtension && !file.InvalidMaxFileSize)
147+
{
148+
var imageBytes = new byte[file.Size];
149+
await using MemoryStream ms = new MemoryStream(imageBytes);
150+
await file.Stream.CopyToAsync(ms);
151+
152+
Employee.Photo = $"data:image/{file.Extension};base64,{Convert.ToBase64String(ms.ToArray())}";
153+
}
154+
155+
ShouldRenderDropZone = false;
156+
}
157+
158+
[JSInvokable("ToggleDropZone")]
159+
public void ToggleDropZone(bool shouldRender)
160+
{
161+
ShouldRenderDropZone = shouldRender;
162+
163+
StateHasChanged();
164+
}
165+
166+
protected override void OnInitialized()
167+
{
168+
DotNetRef = DotNetObjectReference.Create(this);
169+
}
170+
171+
protected override async Task OnAfterRenderAsync(bool firstRender)
172+
{
173+
if (firstRender)
174+
{
175+
await Task.Delay(1); // ensure HTML is ready
176+
await js.InvokeVoidAsync("saveDotNetRef", DotNetRef);
177+
}
178+
179+
await base.OnAfterRenderAsync(firstRender);
180+
}
181+
182+
public void Dispose()
183+
{
184+
DotNetRef?.Dispose();
185+
186+
_ = js.InvokeVoidAsync("detachDragEvents");
187+
}
188+
189+
private Person Employee { get; set; } = new();
190+
191+
public class Person
192+
{
193+
public string FirstName { get; set; } = string.Empty;
194+
195+
public string LastName { get; set; } = string.Empty;
196+
197+
public DateTime? BirthDate { get; set; }
198+
199+
public string Photo { get; set; } = string.Empty;
200+
}
201+
}
202+
````
203+
204+
## See Also
205+
206+
* [DropZone Overview](slug:dropzone-overview)
207+
* [Preview Selected or Uploaded Files](slug:upload-kb-preview-image)
208+
* [Form Item Template](slug:form-formitems-template)

0 commit comments

Comments
 (0)