Drop or Browse

A combined drop zone and browse button using dropZoneMode: true. Users can either drag files onto the zone or click to open the file dialog.

Drag & drop files here

or browse files

new MultipleUpload(document.getElementById('demo-drop-browse'), {
 uploadUrl: '/api/upload',
 multiple: true,
 dropZoneMode: true,
 showThumbnails: true
});

Two ways in, one control

The drop zone and the browse button are not alternatives to choose between — the component offers both from the same element. Dragging suits a user who already has the file visible in another window; browsing suits everyone else, and is the only route on a touch device.

Say so in the copy

The prompt text is doing real work here. “Drop files here” alone reads as the only option and hides the click; naming both makes the control self-explanatory without a separate instruction line. It is a small wording decision that removes a whole class of confusion.