File field

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<div class="tui-field">
  <label class="tui-label" for="invoice">Invoice</label>
  <div class="tui-file-field">
    <input class="tui-file-field__input" id="invoice" name="invoice" type="file" accept=".pdf">
  </div>
  <span class="tui-hint">A PDF, up to 5 MB.</span>
</div>

<!-- Several, listed with their sizes -->
<div class="tui-file-field" data-file-list>
  <input class="tui-file-field__input" id="receipts" name="receipts" type="file" multiple>
</div>

import { fileSize, fileSummary } from '/kit/kit.mjs';

document.querySelector('.tui-file-field').addEventListener('tui-file-field-change', (e) => {
  upload.queue = e.detail.files;              // after a file is taken out of the list
});

fileSize(84200);                              // '84 KB'
fileSummary(['a.pdf', 'b.pdf']);              // '2 files'

Needs kit.css and kit.mjs. How to install the kit.

• It is the browser’s own file input, so the browser says what a screen reader says for it, “Invoice, button, no file chosen”, in the visitor’s language, and the label’s for names it.
• The focus is the input’s, a 2px ring round the whole well; nothing is laid over it, so a pointer, a keyboard, a switch device and a file dragged from the desktop all reach it.
• What was chosen is the browser’s printed name, and the list under it says the same in rows. A polite line says “Chosen: 3 files” and, after a removal, “Removed lunch.jpg. taxi-0412.pdf.”
• Each Remove key is named for its file, “Remove lunch.jpg”, and the focus lands on the next key (or the input) after one is pressed, never nowhere.
• On a phone the well is 48px tall, the key is 42px inside it and every Remove key is 44px square; the text is 16px so the page is not zoomed.

The browser lets a page restyle exactly one part of a file input, the button, with ::file-selector-button, and everything else about the input is its own. So the well is the kit’s field on the input itself and the key is that button drawn as a key: the same cap, skirt and pressed shadow, taking its press from :active. The list is the one thing the browser cannot do, and the removal is done by building a new set of files with a DataTransfer and handing it back to the input, so the form posts what is shown.