Using HTML and CSS to create a custom file upload button

Uploading files is a common feature in web applications. However, the default file upload button provided by browsers is often not customizable and may not fit the design of your website. In this tutorial, we will show you how to use HTML and CSS to create a custom file upload button.

Step 1: Creating the HTML Markup

To create a custom file upload button, we first need to create an HTML markup that will define the structure of the button. We will use the input element with type="file" to allow users to select files to upload.

<div class="upload-btn-wrapper">
  <button class="btn">Upload a file</button>
  <input type="file" name="myfile" />
</div>

In the code above, we have wrapped the input element with a div element that has the class upload-btn-wrapper. We have also added a button element with the class btn to create the custom button.

Step 2: Styling the Button with CSS

Now that we have created the HTML markup, we can style the button with CSS. We will use CSS to hide the default file upload button and style our custom button.

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

In the CSS above, we have set the position property of the upload-btn-wrapper div element to relative, which allows us to position the input element inside it. We have also set the overflow property to hidden, which ensures that the file upload button does not overflow the container.

Next, we have styled the custom button with the class btn. We have set the border, background color, padding, border radius, font size, and font weight properties to create the desired look and feel of the button.

Finally, we have hidden the default file upload button by setting the opacity to 0 and positioning the input element over the custom button using absolute positioning.

Step 3: Adding Functionality with JavaScript

By default, when a user selects a file using the custom button, the file name is not displayed on the button. To display the selected file name, we can use JavaScript to add functionality to our custom button.

const uploadBtn = document.querySelector('.upload-btn-wrapper input[type=file]');
const fileInfo = document.querySelector('.file-info');

uploadBtn.addEventListener('change', function() {
  fileInfo.textContent = this.files[0].name;
});

In the JavaScript above, we have selected the input element using the querySelector method and added an event listener to it that listens for the change event. When the user selects a file using the custom button, the event listener is triggered, and the selected file name is displayed on the page.

We have also selected an element with the class file-info that will display the selected file name.

Step 4: Final Thoughts

In this tutorial, we have shown you how to use HTML, CSS, and JavaScript to create a custom file upload button. By using CSS to style the button and JavaScript to add functionality, we can create a custom file upload button that fits the design of our website.

Remember to test your custom button across different browsers and devices to ensure that it works correctly.