Drop Zone

Configuration component

<loquix-drop-zone> turns any surface into a file drop target. It leaves the wrapped content usable, reveals an overlay only during a file drag, and emits accepted File objects.

loquix-drop-zoneaccept filteringcontent wrapper

Preview

Document drop target Live component

Attach source material

Drag a PDF or image over this area to reveal the Loquix overlay.

Usage

import '@loquix/core/define/define-drop-zone';

<loquix-drop-zone
  accept=".pdf,image/*"
  label="Drop a PDF or image"
>
  <section>Your existing composer or upload UI</section>
</loquix-drop-zone>

dropZone.addEventListener('loquix-drop', (event) => {
  uploadFiles(event.detail.files);
});

Properties

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Disables file drag handling and the overlay.
label	label	string	localized text	Overlay instruction.
accept	accept	string	''	Comma-separated MIME types, wildcards, or extensions.
multiple	multiple	boolean	true	Allows every accepted file rather than only the first.
overlayInset	overlay-inset	string	—	CSS inset shorthand for positioning the overlay.

To accept only one file, set the DOM property because boolean HTML attributes cannot represent false:

dropZone.multiple = false;

Accept filtering

Pattern	Example	Matches
Extension	.pdf	Files ending in .pdf.
Exact MIME type	application/pdf	Files with that MIME type.
MIME wildcard	image/*	Every image MIME type.
Allow all	* or */*	Every file.

Events

Event	Detail
loquix-drop	{ files: File[] }

Note

The drop zone filters browser-provided files but does not upload or persist them. Perform size limits, security checks, and upload handling in your application.

Slots

Slot	Purpose
default	Any content that should become a drop target.

CSS parts

Part	Purpose
overlay	Drag-active overlay.
icon	Built-in plus icon.
label	Overlay instruction text.

CSS custom properties

Variable	Purpose
--loquix-drop-zone-overlay-inset	Overlay position inset.
--loquix-drop-zone-border-radius	Overlay corner radius.
--loquix-drop-zone-border-color	Dashed border color.
--loquix-drop-zone-bg	Overlay background.
--loquix-drop-zone-overlay-blur	Backdrop blur.
--loquix-drop-zone-content-blur	Blur applied to wrapped content while dragging.
--loquix-drop-zone-content-opacity	Wrapped-content opacity while dragging.
--loquix-drop-zone-icon-size	Overlay icon size.
--loquix-drop-zone-color	Overlay icon and label color.