Styled Drop Zone

A custom-styled drop zone with a dashed border, upload icon, and hover effects.

Drop your files here

or click to browse from your computer

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

Restyling the drop area

The drop zone is ordinary markup with the component's class names on it, so it takes your CSS without any theming API: change the border, the background, the icon, the copy. dropZoneMode: true is what puts the control into this layout in the first place.

Keep the state changes visible

The one thing worth preserving when restyling is the drag-over state. A target that does not visibly react while a file hovers over it leaves the user unsure whether releasing will do anything — and the usual result is a file dropped on the desktop instead. A border colour change is enough; it just has to be unmistakable.