Drag and Drop Upload

How It Works

CoreUpload provides a built-in drop zone that accepts files dragged from the operating system's file manager. When files are dropped onto the zone, they are automatically queued and uploaded to the server. The drop zone provides visual feedback during the drag-over state, making it clear to users where to drop their files.

Full-Page Drop Overlay

Enable a full-page drop zone that activates when a user drags files anywhere over the browser window. A translucent overlay with clear messaging guides them to release. This is ideal for dashboard-style apps where the upload area may not be visible on screen.

<core-upload asp-upload-url="/api/upload/upload"
 asp-multiple="true"
 asp-full-page-drop="true"
 asp-progress="true">
</core-upload>

Folder Drop (Recursive)

Drop entire folders and the uploader walks the directory tree recursively using the DataTransfer API, queuing every file it finds. Relative paths are preserved so the server can reconstruct the folder structure if needed.

<core-upload asp-upload-url="/api/upload/upload"
 asp-multiple="true"
 asp-drop-zone="true"
 asp-folder-drop="true"
 asp-progress="true">
</core-upload>

Code Example

Enable drag-and-drop by setting the drag-drop attribute on the Tag Helper.

Razor Page (Tag Helper)

<core-upload asp-upload-url="/api/upload/upload"
 asp-extensions=".jpg,.png,.gif,.pdf,.zip,.doc,.docx"
 asp-max-size="10MB"
 asp-multiple="true"
 asp-drop-zone="true"
 asp-progress="true"
 asp-thumbnails="true">
</core-upload>

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCoreUpload();
builder.Services.AddRazorPages();

var app = builder.Build();
app.UseCoreUpload();
app.UseStaticFiles();
app.UseRouting();
app.MapCoreUploadEndpoints();
app.MapRazorPages();
app.Run();