From 8cb5f51736a58a34736bc59ce59d6c0677c7ffb1 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 7 Nov 2025 14:59:17 +0200 Subject: [PATCH] kb(DropZone): Add KB about a full page DropZone --- components/dropzone/overview.md | 1 + .../dropzone-display-over-whole-page.md | 208 ++++++++++++++++++ 2 files changed, 209 insertions(+) create mode 100644 knowledge-base/dropzone-display-over-whole-page.md diff --git a/components/dropzone/overview.md b/components/dropzone/overview.md index d32e1384cb..671bb2adae 100644 --- a/components/dropzone/overview.md +++ b/components/dropzone/overview.md @@ -80,3 +80,4 @@ The following parameters enable you to customize the appearance of the Blazor Dr ## See Also * [Live Demo: Blazor DropZone Overview and Key Features](https://demos.telerik.com/blazor-ui/dropzone/overview) +* [Display DropZone Over the Whole Page](slug:dropzone-kb-display-over-whole-page) diff --git a/knowledge-base/dropzone-display-over-whole-page.md b/knowledge-base/dropzone-display-over-whole-page.md new file mode 100644 index 0000000000..6524b0381f --- /dev/null +++ b/knowledge-base/dropzone-display-over-whole-page.md @@ -0,0 +1,208 @@ +--- +title: Display DropZone Over the Whole Page +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. +type: how-to +page_title: How To Display DropZone Over the Whole Page +slug: dropzone-kb-display-over-whole-page +tags: telerik, blazor, dropzone, fileselect, upload +ticketid: 1703123 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductDropZone for Blazor
+ +## Description + +This article answers the following questions: + +* How to display a Telerik Blazor DropZone over the whole web page? +* 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. + +## Solution + +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. + +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. + +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). + +Make sure to rename the `__Main` type in the `DotNetObjectReference` to the actual Razor component that you are using. + +>caption Display DropZone over the whole page during file drag + +````RAZOR +@using System.IO + +@implements IDisposable + +@inject IJSRuntime js + +@if (ShouldRenderDropZone) +{ + +} + + + + + + + + + + + + + + +@* Move JavaScript code to a separate JS file *@ + + +@code { + // Replace __Main with your Razor component type + private DotNetObjectReference<__Main>? DotNetRef { get; set; } + + private string DropZoneId => "my-dropzone"; + + private bool ShouldRenderDropZone { get; set; } + + private List ImageFileExtensions { get; set; } = new List() { ".jpg", ".jpeg", ".png", ".gif" }; + private long? MaxImageSize { get; set; } = 16 * 1024 * 1024; + + private async Task OnFileSelect(FileSelectEventArgs args) + { + FileSelectFileInfo file = args.Files.First(); + + if (!file.InvalidExtension && !file.InvalidMaxFileSize) + { + var imageBytes = new byte[file.Size]; + await using MemoryStream ms = new MemoryStream(imageBytes); + await file.Stream.CopyToAsync(ms); + + Employee.Photo = $"data:image/{file.Extension};base64,{Convert.ToBase64String(ms.ToArray())}"; + } + + ShouldRenderDropZone = false; + } + + [JSInvokable("ToggleDropZone")] + public void ToggleDropZone(bool shouldRender) + { + ShouldRenderDropZone = shouldRender; + + StateHasChanged(); + } + + protected override void OnInitialized() + { + DotNetRef = DotNetObjectReference.Create(this); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(1); // ensure HTML is ready + await js.InvokeVoidAsync("saveDotNetRef", DotNetRef); + } + + await base.OnAfterRenderAsync(firstRender); + } + + public void Dispose() + { + DotNetRef?.Dispose(); + + _ = js.InvokeVoidAsync("detachDragEvents"); + } + + private Person Employee { get; set; } = new(); + + public class Person + { + public string FirstName { get; set; } = string.Empty; + + public string LastName { get; set; } = string.Empty; + + public DateTime? BirthDate { get; set; } + + public string Photo { get; set; } = string.Empty; + } +} +```` + +## See Also + +* [DropZone Overview](slug:dropzone-overview) +* [Preview Selected or Uploaded Files](slug:upload-kb-preview-image) +* [Form Item Template](slug:form-formitems-template)