Upload

File picker in <mo-upload>: drag-and-drop plus removable file badges over a native input.

INSTALL

1pnpm dlx @sayagodev/mo add upload

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/upload.css";2import "@sayagodev/mo/js/upload.js";

EXAMPLES

Default

1<mo-upload>2  <input type="file" name="files" multiple hidden />3  <button type="button">Choose files</button>4  <div data-files></div>5</mo-upload>6

USAGE

1<mo-upload>2  <input type="file" name="files" multiple hidden />3  <button type="button">Choose files</button>4  <div data-files></div>5</mo-upload>

API

NAMEKINDDESCRIPTION

<mo-upload>elementWraps a native file input with drop + badges

[data-files]attributeHosts one removable badge per selected file

changeeventNative input change bubbles on pick, drop or removal

FILES

src/css/upload.csssrc/js/upload.js

Install:mo add upload

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.