Table of Content
In a form, the file value of the type attribute allows you to define an input element for file uploads. This displays a browse button, which the user can click on to select a file on their local computer.
Once a file has been selected, the file name appears next to the button. The data can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.
What are the additional file input attributes?
In addition to the common attributes shared by all <input> elements, inputs of type file also support the following attributes: accept, capture, files, and multiple.
What are the unique file type specifiers?
A unique file type specifier is a string that describes a type of file that may be selected by the user in an <input> element of type file. Each unique file type specifier may take one of the following forms:
A valid case-insensitive filename extension, starting with a period (“.”) character. For example: .jpg, .pdf, or .doc.
A valid MIME type string, with no extensions.
The string audio/* meaning “any audio file”.
The string video/* meaning “any video file”.
The string image/* meaning “any image file”.
The accept attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas.
How to code a custom file input?
<div class="input-container"> <input type="file" id="real-input"> <button class="browse-btn"> Browse Files </button> <span class="file-info">Upload a file</span> </div>
Our div with the class of input-container is going to serve as the actual “file input” that our users see.
body { font-family: sans-serif; } .input-container { margin: 3em auto; max-width: 300px; background-color: #EDEDED; border: 1px solid #DFDFDF; border-radius: 5px; } input[type='file'] { display: none; } .file-info { font-size: 0.9em; } .browse-btn { background: #03A595; color: #fff; min-height: 35px; padding: 10px; border: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .browse-btn:hover { background: #4ec0b4; } @media (max-width: 300px) { button { width: 100%; border-top-right-radius: 5px; border-bottom-left-radius: 0; } .file-info { display: block; margin: 10px 5px; } } input[type='file'] { display: none; } input[type='file'] { opacity: 0; position: absolute; }
How to make a file input work?
Now that our file input looks the way we want (bonus points if you re-styled the button to match your idea of ultimate snazzy-ness), it’s time to make our fake input behave like its real counterpart.
We want to start by creating a reference to the pieces of the DOM that we will need to interact with.
const uploadButton = document.querySelector('.browse-btn'); const fileInfo = document.querySelector('.file-info'); const realInput = document.getElementById('real-input'); uploadButton.addEventListener('click', () => { realInput.click(); }); realInput.addEventListener('change', () => { const name = realInput.value.split(/\\|\//).pop(); const truncated = name.length > 20 ? name.substr(name.length - 20) : name; fileInfo.innerHTML = truncated; });
How you want to handle the next step depends on the styling you have chosen for your custom input.
If you click “Browse”, you should now get a browse file dialog that updates the input with the file you selected, effectively mimicking a real file input.