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>