Author Photo
Christopher Unum I am a software Developer, I write web development tutorials, I also mentor aspiring web developers. s

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. 


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


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">
      <input type="text" id="upload-name" disabled="true" />
      <button id="upload-button">upload</button>
  <input type="file" id="hidden-upload" style="display:none"/>


Now we will style the customized file uploader

  border:1px solid #2077C9;
  margin:20px 0;



  padding:0 20px;



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

//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 =[0].name;


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.