Basic Drop Zone

Enable drag-and-drop uploads with the <upload-dropzone> tag helper. Users can drag files from their desktop directly into the designated drop area.

What you should see: drag a file anywhere over the dashed zone — it highlights on hover and the drop starts the upload.

Drag & drop files here or click to browse

<upload-dropzone asp-upload-url="/api/upload/upload"
 asp-multiple="true"
 asp-extensions=".jpg,.png,.gif,.pdf,.doc,.docx"
 asp-max-size="10MB"
 asp-auto-upload="true"
 asp-progress="true">
</upload-dropzone>

The drop target

asp-drop-zone is true by default, so the drop area is already there. It accepts dropped files and also opens the file dialog when clicked, which is what keeps it usable for people who cannot drag.

Design the drag-over state

The one thing worth checking when restyling is that the zone visibly reacts while a file hovers over it. Without that the user cannot tell whether releasing will do anything, and the usual result is a file dropped onto the desktop instead.