Custom File Input — Styled Upload Field Snippet

A custom file input is one of the most-searched form snippets because the default <input type="file"> is notoriously ugly and unstylable — its button text and appearance are controlled by the browser and OS, and look different everywhere. For a drag-and-drop area instead, see the file dropzone; for upload feedback, the upload progress card. This snippet replaces it with a clean, branded control that shows a "Choose file" button, the selected file's name and size, and a clear button to remove it — while keeping a real, accessible <input type="file"> underneath so uploads and keyboard support keep working.

The accessible hide-and-replace pattern

The trick to styling a file input without breaking it is to keep the native input and hide it visually rather than replace it. The <input type="file"> is wrapped in a <label> and hidden with position: absolute; width: 1px; height: 1px; opacity: 0 — not display: none, which would remove it from the tab order and from assistive tech. Because the whole control is a <label>, clicking anywhere on it (the styled button, the filename area) opens the OS file picker natively. This is the same reliable pattern used for the accessible custom checkbox, applied to file inputs: the browser handles the file dialog, validation, and form submission; CSS only handles appearance.

Showing the file name and size

When the user picks a file, a single change listener reads input.files[0] and writes the file's name and a human-readable size into the .file-name element ("report.pdf · 248 KB"). The fmtSize helper converts the raw byte count into B, KB, or MB so the size is readable. The filename area uses text-overflow: ellipsis with overflow: hidden so a very long filename truncates gracefully instead of breaking the layout. A .has-file class on the wrapper darkens the text and bolds it so a chosen file looks visibly different from the "No file selected" placeholder.

The clear button

Once a file is selected, a clear (×) button appears. Clicking it resets the input value (input.value = ''), restores the placeholder text, removes the .has-file class, and hides itself again. One important detail: the clear button calls e.preventDefault() because it lives inside the <label> — without it, clicking the × would also trigger the label and re-open the file picker. This is exactly the kind of subtlety that breaks naive custom file inputs, and handling it is what makes this control feel solid. Resetting input.value is the correct way to clear a file input; you cannot set its value to a filename for security reasons, but you can clear it.

Restricting accepted file types

The native accept attribute (.pdf,.png,.jpg,.jpeg,.doc,.docx) tells the OS file picker to highlight matching file types, which guides users toward valid selections. Note that accept is a hint, not enforcement — users can still override it — so always validate the file type and size on the client (in the change handler) and again on the server. The hint line under the control ("PDF, Word, or image · up to 10MB") sets expectations before the user opens the dialog.

The focus and hover states

Because the native input is preserved, keyboard focus lands on it, and .file:focus-within styles the whole control with the brand border and a focus ring — using :focus-within so the ring appears when the hidden input is focused via keyboard. The control also has a hover state. These make the custom input feel like a first-class form field rather than a static button, and keep it operable for keyboard users who Tab to it and press Enter/Space to open the picker.

Customizing the control

Re-theme by changing the "Choose file" button color, the focus ring, and the clear-button hover (red here). Swap the upload and × SVGs for your own icons. Change the accept attribute to your allowed types and update the hint text to match. To show a thumbnail preview for images, read the file with URL.createObjectURL(file) in the change handler and set it as an <img> src (remember to revokeObjectURL when clearing). To accept multiple files, add the multiple attribute and render a small list of names instead of one. The structure — label, hidden input, button, name, clear — stays the same.

Why keep the native input

A common but broken approach builds a "file input" from a styled <button> plus JavaScript, which cannot actually open the OS file dialog without a hidden real input anyway, and risks losing keyboard support and form submission. Keeping the genuine <input type="file"> means the file is included in a normal form submit under its name, the OS file picker (including drag-from-desktop and recent files) works, screen readers announce it as a file upload, and it is keyboard-operable — all for free. The custom look is purely cosmetic CSS layered on top of a fully functional field.