Codelabs.DragZoneInputFile

Drag Zone File Input Component

How to use

Install the nuget package

NuGet\Install-Package DragZoneInputFile -Version 8.0.1

In your razor component

@page "/" @using DragZoneInputFile <div class="row"> <DragZoneInputFile Height="500" Class="col-6" Multiple OnUpload="OnFileUploadComplete" FileFormats=".pdf,.docx"></DragZoneInputFile> </div> File Name: @_fileNames @code{ string _fileNames = string.Empty; private void OnFileUploadComplete(IEnumerable<IBrowserFile> files) { // Do something with the files foreach (var file in files) { _fileNames += $"{file.Name}, "; //upload to server } } }

Customize various colors using following variables

:root { --drag-zone-bg-hover: #F3F3F4; --drag-zone-bg-focus: #FFEBC6; --drag-zone-border-focus: blue; }