Styled Drop Zone

Customize the drop zone appearance with CSS variables. Change border style, colors, icon, and hover effects.

What you should see: the drop zone restyled through CSS variables — border, colours, icon and hover state — while keeping its keyboard-reachable browse button.

<style>
 .custom-dropzone {
 --uploader-drop-border-color: #8b5cf6;
 --uploader-drop-border-style: dashed;
 --uploader-drop-border-width: 3px;
 --uploader-drop-border-radius: 16px;
 --uploader-drop-bg: #f5f3ff;
 --uploader-drop-bg-hover: #ede9fe;
 --uploader-drop-text-color: #6d28d9;
 }
</style>

<div class="custom-dropzone">
    <div id="styledDropZone"></div>
</div>

<script>
CoreUpload.create('#styledDropZone', {
    uploadUrl: '/api/upload/upload',
    multiple: true,
    autoUpload: true,
    showProgress: true,
    dropTarget: '#styledDropZone'
});
</script>

Restyling the drop area

The drop zone is markup with the component's class names, so the border, background, icon and copy all take your CSS without any theming API.

Keep the drag-over state unmistakable

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 obvious.