how to create a custom file upload button using html, css and javascript

Styling your input file type element can be nerve-racking when you try to style them directly. In this tutorial, we will learn how to create a customized file uploader. 

Prerequisite

Basic knowledge of Html, CSS and JavaScript is required for this tutorial

Html

Using Html, we will create our customized file uploader, and also we will add the input file type element which will be hidden.

<div id="upload-container">
  <div id="upload-border">
    <nobr>
      <input type="text" id="upload-name" disabled="true" />
      <button id="upload-button">upload</button>
    </nobr>
  </div>
  <input type="file" id="hidden-upload" style="display:none"/>
</div>

CSS

Now we will style the customized file uploader

#upload-container{
  text-align:center;
}
#upload-border{
  height:30px;
  border:1px solid #2077C9;
  display:inline-block;
  padding-left:7px;
  margin:20px 0;
}

#upload-name{
  height:70%;
  border:none;

}

#upload-button{
  height:100%;
  padding:0 20px;
  border:none;
  background:#2077C9;
  color:white;
  cursor:pointer;
}

#upload-name:focus, #upload-button:focus{
  outline:none;
}

JavaScript

Using JavaScript, We can now use our customized file uploader button to click on the hidden input file type element as shown below.

//adds event listener to the file uploader button
document.querySelector("#upload-button").addEventListener("click", () => {
  //clicks on the file input
  document.querySelector("#hidden-upload").click();
});

//adds event listener on the hidden file input to listen for any changes
document.querySelector("#hidden-upload").addEventListener("change", (event) => {
  //gets the file name
  document.querySelector("#upload-name").value = event.target.files[0].name;
});

Conclusion

Customizing your file uploader isn't that difficult. The main idea is to create a customized uploader and using it as a proxy to the input file type element.