eds-input-dropzone

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React

In Vue

Properties

Property	Attribute	Description	Type	Default
`accept`	`accept`	Accepted file types (e.g., “.pdf,.png,.jpg” or “image/*”).	`string`	`undefined`
`disabled`	`disabled`	If `true`, the input is disabled.	`boolean`	`false`
`inputId`	`input-id`	The `id` attribute of the internal input element. Defaults to `name` if not set.	`string`	`undefined`
`maxFileSize`	`max-file-size`	Maximum file size in bytes. If not set, no size limit is enforced client-side.	`number`	`undefined`
`multiple`	`multiple`	If `true`, allows multiple file selection.	`boolean`	`true`
`name` (required)	`name`	The `name` attribute of the input element. Required for form submission.	`string`	`undefined`
`primaryText`	`primary-text`	Primary text shown in dropzone.	`string`	`'Drag and drop files here'`
`required`	`required`	If `true`, the input is required.	`boolean`	`false`
`secondaryText`	`secondary-text`	Secondary text shown in dropzone.	`string`	`'or click to browse'`

Events

Event	Description	Type
`edsfile`	Emits when files are selected or removed. Use `event.detail.files` to access the FileList.	`CustomEvent<{ files: File[]; }>`

Dependencies

Used by

eds-input-field

Graph

graph TD;
  eds-input-field --> eds-input-dropzone
  style eds-input-dropzone fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS