Dropzone

A dashed well that takes files by drag or by click. The <input type="file"> inside it is the real control, so the form submits what the well holds without any help.

Basic

<label data-dropzone>
  <input type="file" multiple>
  <span>Drop files here, or choose</span>
  <ul></ul>
</label>

Drop files on the well or click it to open the file picker; either way the list underneath names what the input now holds.

Notes

• s72.js hands dropped files to the input through a DataTransfer, so a drop and a pick end in the same place.
• The well takes data-over while something is dragged across it, which is what the solid border and the lighter fill answer to.
• The input lies over the label, invisible but still focusable; the focus ring is drawn on the well instead.
• A <ul> is filled with each file's name and size. Leave it out and the well keeps working.