Drag-and-Drop Upload
Definition
Drag-and-drop upload is a browser behaviour built on a small set of HTML drag events: dragenter, dragover, dragleave and drop. When a file is dragged over a page, the browser offers it to whatever element is underneath; if that element accepts the drop, the page receives a DataTransfer object whose files property is a list of File handles. Each File carries a name, a size in bytes and a guessed MIME type, all readable before a single byte leaves the machine. That lets the page check the file against an upload limit and show a preview or an error straight away. Dropping a folder works too, but only through a separate directory-entry API, and only in browsers that implement it.
Why It Matters
The picker route costs roughly five actions: click, wait for the dialog, navigate to the folder, select, confirm. Dragging is one. That gap shows up most with multiple files, where a drop takes twenty files in a single gesture and a picker takes twenty clicks or a careful shift-select. The catch is that a drop target is invisible to a keyboard and to a screen reader, so a page that offers only dragging has quietly locked out part of its audience. Keeping a real file input alongside the drop zone costs nothing and avoids that.
How It Works
The page registers a handler on dragover and calls preventDefault inside it. Skip that step and the browser does its own default thing, which is to navigate away and open the dropped file. On drop, the handler reads event.dataTransfer.files, a FileList, and turns it into an ordinary array. The page can then validate size and type, render a thumbnail from a blob URL, and start sending. Small files go in one request as multipart form data; anything large is better sent as a chunked upload so a dropped connection does not cost the whole transfer. Progress comes from the upload progress event on the request.
Real-World Example
A freelance designer drags a 12 MB PDF portfolio out of Finder and onto the 99helpers drop zone. The page reads the size and type before uploading, warns that the file is large enough to be worth compressing, and then sends it. Thirty seconds later it is live at jane-portfolio.99helpers.site. The same page still has a plain Choose file button underneath, so a client on a tablet with no drag gesture can do exactly the same thing.
Common Mistakes
- ✕Forgetting preventDefault on the dragover handler — the browser treats the drop as navigation and replaces your page with the raw file
- ✕Offering the drop zone as the only way in — keyboard and screen reader users cannot drag, so a real file input has to stay in the markup
- ✕Trusting the type reported on the File object — it is guessed from the extension and is trivially wrong, so the server still has to check the bytes
- ✕Assuming a dropped folder behaves like a dropped file — folders arrive through a different API and silently yield nothing if you only read the files list
Related Terms
Folder Upload
Sending a whole directory to a host in one go, with its internal structure intact, rather than picking files one at a time. Every file arrives at the same place in the tree it started in.
Chunked Upload
Chunked upload is the technique of splitting one large file into smaller pieces and sending each piece as its own request. If the connection drops, only the piece in flight is lost rather than the whole transfer.
Upload Limit
An upload limit is the ceiling on a single upload operation — how much you may send in one request, and sometimes how many files or how often. It constrains the act of sending, not the size of any one stored file and not the total you are allowed to keep.
File Size Limit
A file size limit is the largest a single file may be for a host to accept and store it. It is measured one file at a time, so it says nothing about how many files you may keep or how much traffic they will generate.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →