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.