Custom-file Upload Button With File Name

This code project provides a custom-file upload button with the selected file name displayed. It consists of HTML, CSS, and JavaScript code to create an enhanced file input field.

This code is helpful when you want to style the default file input button and show the selected file name to provide a better user experience. The custom button and file name display make the file upload process more visually appealing and informative for users.

By using this code, you can easily implement a customized file input field in your web projects and enhance the user interface of your file upload functionality.

How to Create Custom-file Upload Button with File Name

1. Create an <input> element with type="file", class="input-file", and id="my-file". Wrap this input element and a <label> element within a <form> tag. The HTML structure for the custom file upload is as follows:

<h1>Flat UI - Custom Input:file</h1>
<form action="#">
  <div class="input-file-container">  
    <input class="input-file" id="my-file" type="file">
    <label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
  </div>
  <p class="file-return"></p>
</form>

2. Style the file input container using the following CSS styles:

.input-file-container {
  position: relative;
  width: 225px;
} 
.js .input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #39D2B4;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
}
.js .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  background: #34495E;
  color: #39D2B4;
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.js .file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}
.js .file-return:not(:empty):before {
  content: "Selected file: ";
  font-style: normal;
  font-weight: normal;
}

form {
  width: 225px;
  margin: 0 auto;
  text-align:center;
}
h2 + P {
  text-align: center;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}

3. To activate the custom file upload functionality, add the following JavaScript code just before the closing </body> tag in your HTML file. It adds event listeners to the elements with the respective class names and performs actions when certain events occur. It enables the functionality of the custom file upload button and updates the selected file name display.

document.querySelector("html").classList.add('js');

var fileInput  = document.querySelector( ".input-file" ),  
    button     = document.querySelector( ".input-file-trigger" ),
    the_return = document.querySelector(".file-return");
      
button.addEventListener( "keydown", function( event ) {  
    if ( event.keyCode == 13 || event.keyCode == 32 ) {  
        fileInput.focus();  
    }  
});
button.addEventListener( "click", function( event ) {
   fileInput.focus();
   return false;
});  
fileInput.addEventListener( "change", function( event ) {  
    the_return.innerHTML = this.value;  
});

That’s all! hopefully, you have successfully created a custom file upload button with the file name. If you have any questions or suggestions, feel free to comment below.