File Upload

<dsx-file-upload> — File Upload

Drag-and-drop file selector with internal file list rendering and remove actions.

Live Preview

Import

import '@bnotk/dsx/components/file-upload.js';

Usage

<dsx-file-upload accept=".pdf,.png" multiple></dsx-file-upload>

Types

DsxFileInfo

Internal shape used for the rendered file list.

Field	Type	Description
name	string	File name shown in the list.
size	number	File size in bytes.
type	string	MIME type string.
progress	number	Optional progress field present in the type but not currently rendered or updated by the component.

Notes:

• The public dsx-file-removed event exposes one of these internal file info objects, not the original File.

Elements

<dsx-file-upload>

Dropzone plus hidden native file input and a rendered list of selected files.

Properties

Property	Type	Default	Description
accept	string	”	Forwarded to the hidden file input and displayed as helper text when present.
multiple	boolean	false	Allows selecting/accumulating multiple files.
maxSize	string	”	Declared property mapped to the max-size attribute. Present in the API but not enforced by the current implementation.
disabled	boolean	false	Disables drag-and-drop and click-to-browse behavior.

Methods

None.

Events

Event	Detail	Description
dsx-files-selected	{ files: File[] }	Bubbles/composed after files are chosen via drop or the hidden file input.
dsx-file-removed	{ file: DsxFileInfo, index: number }	Bubbles/composed after a rendered file row is removed.

Slots

None.

CSS Parts

This element does not expose shadow parts.

Notes

• Single-file mode replaces the current file list; multiple mode appends new files to the existing list.
• Selected files are copied into lightweight metadata objects before being rendered.
• Progress bar styles exist in CSS but are not currently used in the rendered template.

Behavior Notes

• The dropzone displays German helper text: “Dateien hier ablegen oder durchsuchen”.
• Clicking the dropzone programmatically clicks the hidden file input.
• The component formats sizes into B / KB / MB strings using a simple threshold-based helper.

Styling Notes

• Dropzone uses a dashed grey border and switches to the main color plus grey background on hover/dragover.
• Rendered file rows use a soft grey surface, thin border, and trailing remove button.