Vanilla Breeze

data-upload

Enhance a file input with a drag-and-drop zone, file list display, and browse button. Works with native accept and multiple attributes.

Overview

The data-upload attribute enhances a native <input type="file"> with a drag-and-drop zone, visual file list, and styled prompt. No wrapper element needed — just add the attribute to the file input.

How It Works

Add data-upload to any <input type="file">. The init script:

  1. Creates a .upload-zone wrapper with role="presentation" around the input
  2. Adds a .upload-prompt with contextual text based on accept and multiple attributes
  3. Creates a .upload-file-list (<ul> with aria-label="Selected files") to display chosen files
  4. Listens for drag events (dragenter, dragleave, dragover, drop) on the zone
  5. Sets data-dragover on the zone during active drag for visual feedback
  6. Clicking anywhere in the zone triggers the hidden native file input
  7. On file selection, renders file names and sizes in the file list

The underlying input remains a real form control. It submits with the form, respects accept and multiple, and fires native change events.

Attributes

Attribute Type Description
data-upload boolean Enables the drag-and-drop zone enhancement on the file input.
data-upload-init boolean Set automatically to prevent double-binding. Do not set manually.
accept string Native attribute. Filters allowed file types. Reflected in the prompt text.
multiple boolean Native attribute. Allows selecting multiple files. Changes prompt to plural text.

DOM Structure

After initialization, the file input is wrapped in the following structure:

The native <input type="file"> is visually hidden but remains in the DOM for form submission and accessibility.

Accept Types

Use the native accept attribute to restrict file types. The prompt text updates to reflect allowed types. Dragged files that do not match the accept filter are rejected.

Multiple Files

Add the native multiple attribute to allow selecting more than one file. The file list displays all selected files with individual entries.

With Form Field

Wrap in <form-field> for validation feedback, helper text, and required indicators.

PDF or Word document, max 5 MB.

Drag States

During a drag operation, the data-dragover attribute is set on the .upload-zone element. Use it in CSS to provide visual feedback indicating the zone is an active drop target.

  • dragenter — sets data-dragover when a file enters the zone
  • dragleave — removes data-dragover when the file leaves the zone
  • dragover — prevents default to enable drop
  • drop — processes dropped files and removes data-dragover

Events

The file input fires the native change event when files are selected via browse or drag-and-drop. Access the files from e.target.files.

You can also listen for drag events directly on the .upload-zone element:

Styling

The upload zone, prompt, and file list are fully customizable via CSS. All styles target the generated class names:

The dashed border and background color change during drag-over, providing clear visual feedback. The file list renders below the prompt with file names and formatted sizes.

Dynamic Elements

File inputs added to the DOM after page load are automatically enhanced via a MutationObserver. No manual initialization is needed.
↑