Dropzone — RenDS Components

About

Overview

Dropzone gives users two paths to upload: drag a file in, or click and browse. Both end at the same hidden <input type="file">. The component adds visual drag-over state, file type / size validation hooks, and a built-in error display. Use it for avatars, document uploads, image galleries — anywhere "drop a file" feels right.

Live

Demo

↑

Drop a file or click to browse

PDF, PNG, JPG up to 10 MB

<ren-dropzone accept="image/*" max-size="10485760">
  <input type="file" hidden>
  <div class="ren-dropzone-icon">↑</div>
  <p class="ren-dropzone-title">Drop a file or click to browse</p>
  <p class="ren-dropzone-hint">PDF, PNG, JPG up to 10 MB</p>
</ren-dropzone>

Reference

API

Class	Effect
`.ren-dropzone`	The drop region. Dashed border, hover / drag-over / accepted / rejected states all via CSS.
`.ren-dropzone-icon`	Optional leading icon (or up-arrow glyph).
`.ren-dropzone-title`	Primary message — "Drop a file or click to browse".
`.ren-dropzone-hint`	Secondary hint — accepted formats, size limit.
`.ren-dropzone-list`	Accepted files render here once dropped / picked.

Web Component attributes

Attribute	Type	Default	Notes
`accept`	string	"*"	MIME pattern, mirrors `<input accept>`. e.g. `image/*`, `.pdf,.docx`.
`multiple`	boolean	false	Allow multiple files per drop.
`max-size`	number (bytes)	—	Reject files larger than this. Component shows an error message.

Events

Event	Detail
`ren-files`	Files were accepted. `{ files: File[] }`.
`ren-reject`	Files rejected (wrong type, too big). `{ files: File[], reason: string }`.

Inclusive by default

Accessibility

The dropzone is a real <label> wrapping the hidden file input — clicking anywhere opens the file picker, no JS needed.
Keyboard users can Tab to the input and press Enter / Space to open the file picker.
Drag-over is visual only; without it, the component is still fully usable.
Show clear feedback on rejection — wrong type, too big — and announce it with role="alert".