Drag and Drop File Upload in Classic ASP

Classic ASP guide · Updated 2026-08-16

Drop a folder on the page and watch the queue fill — no plug-in required.

How drag and drop actually works

Dropping a file on a web page is three DOM events and one object. The browser hands you real File objects in event.dataTransfer.files — the same objects a file input produces — so everything downstream is identical to a normal upload.

var zone = document.getElementById("dropzone");

// you MUST cancel dragover, or the browser navigates to the file instead
zone.addEventListener("dragover", function (e) {
    e.preventDefault();
    zone.classList.add("is-over");
});

zone.addEventListener("dragleave", function () {
    zone.classList.remove("is-over");
});

zone.addEventListener("drop", function (e) {
    e.preventDefault();
    zone.classList.remove("is-over");

    var files = e.dataTransfer.files;      // a FileList, exactly like input.files
    for (var i = 0; i < files.length; i++) {
        upload(files[i]);
    }
});

Dropping whole folders

Chromium and WebKit browsers expose a directory entry API that lets you walk a dropped folder recursively:

var items = e.dataTransfer.items;

for (var i = 0; i < items.length; i++) {
    var entry = items[i].webkitGetAsEntry && items[i].webkitGetAsEntry();
    if (entry && entry.isDirectory) {
        readDirectory(entry);   // recurse with a directory reader
    }
}

Support is uneven and the reader is asynchronous and batched, which makes correct recursion fiddly. This is one of the better reasons to use a library rather than hand-roll.

Pasting from the clipboard

The same File objects arrive on a paste, which is how users expect to attach a screenshot:

document.addEventListener("paste", function (e) {
    var items = e.clipboardData && e.clipboardData.items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].kind === "file") {
            upload(items[i].getAsFile());
        }
    }
});

Drag and drop with ASP Uploader

The rendered control accepts dropped files without any extra configuration — drop them onto the upload area and they join the queue exactly as if they had been picked from the dialog. Validation, progress and cancelling all behave the same way.

<%@ Language="VBScript" %>
<!-- #include file="aspuploader/include_aspuploader.asp" -->

<form id="form1" method="POST">
    <%
    Dim uploader
    Set uploader = new AspUploader
    uploader.Name = "myuploader"
    uploader.MultipleFilesUpload = true
    uploader.MaxSizeKB = 10240
    uploader.InsertText = "Drop files here or click to browse"
    uploader.AllowedFileExtensions = "*.jpg,*.png,*.gif,*.pdf"
    %>
    <%= uploader.GetString() %>
</form>

Server-side handling is unchanged — a dropped file is just a file:

<%
If Request.Form("myuploader") & "" <> "" Then
    Dim list, i, mvcfile
    list = Split(Request.Form("myuploader"), "/")
    For i = 0 To UBound(list)
        Set mvcfile = uploader.GetUploadedFile(list(i))
        mvcfile.MoveTo Server.MapPath("uploads/" & mvcfile.FileName)
    Next
End If
%>

Designing a drop zone people can use

• Make it look droppable before anything is dragged. A dashed border and an explicit "drop files here" label. Invisible affordances get used by nobody.
• Give strong hover feedback. Change the border and background on dragover. Users need to know the drop will land.
• Make the zone generous. A 40-pixel strip is a precision task; a large panel is not.
• Always keep the browse button. Drag and drop is impossible on touch devices and hard with assistive technology. It is an accelerator, never the only route.
• Handle a drop of the wrong type gracefully. Dropping a 4 GB video onto a "profile picture" zone should say so immediately, not start transferring.

#dropzone {
    border: 2px dashed #c9d2e3;
    border-radius: .5rem;
    padding: 2.5rem;
    text-align: center;
    color: #5a6b8c;
    transition: background .15s, border-color .15s;
}

#dropzone.is-over {
    border-color: #377dff;
    background: #f4f8ff;
}

Accessibility

Drag and drop cannot be performed with a keyboard, so the file input must remain reachable and labelled. Keep the real <input type="file"> in the DOM — visually hidden is fine, display:none is not — and announce queue changes in a live region so screen reader users hear that a file was added.

Frequently asked questions

Does drag and drop upload work in all browsers?

All current desktop browsers support dropping files. Folder dropping is limited to Chromium and WebKit based browsers. Touch devices have no drag and drop, so the browse button must stay.

Can I drag files from one browser window to another?

No. Only files dragged from the operating system's file manager produce real File objects.

Does drag and drop require a plug-in?

No. It is native HTML5 — Flash and Silverlight have not been needed for this in over a decade.