Creating a Stylish File Upload Button with CSS and Image Preview Feature

Custom File Upload Button with CSS and Image Preview Feature: Intro

Uploading files on a website is a common task, but the default file upload button can be quite plain and boring. In this tutorial, we’ll show you how to create a custom file upload button using CSS and add a preview image feature to it. This will not only improve the overall look and feel of your website but also enhance its user experience.

Before we start, let’s understand the basic structure of an input file element:

Author

• TechieBundle
• April 09, 2023

Live Demo

• Demo

Code

You can check the code used in the demo below which you can also use in your projects.

HTML

This is the standard HTML for an input file element, which allows users to select files from their device. But this input field is not very customizable by default, and the design of the button is limited to the browser’s default style.

To create a custom file upload button, we’ll hide the default input field and create a new element that will act as a button. Here’s the HTML code for it:

<!-- tb is acronym for TechieBundle -->
<a href="//techiebundle.com" target="_blank">
  <h2> TechieBundle: Get More Template Click Here...</h2>
</a>
<h1>Creating a Stylish File Upload Button with CSS and Image Preview Feature</h1>
<div class="tb-container">
  <div class="tb-img-view">
    <img id="tb-image" />
  </div>
  <label for="tb-file-upload">Upload Image</label>
  <input type="file" id="tb-file-upload" accept="image/*" onchange="fileUpload(event);" />
</div>

In this code, we have wrapped the input file element inside a div element with the class “tb-file-upload”. We have also added a label element with the class “tb-file-upload” that will act as a button to trigger the file upload dialog. Lastly, we have added an img element with the id “tb-image” that will display a preview of the selected image.

CSS

Now let’s add some CSS to style our file upload button. Here’s the code for it:

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 background: #2b5876;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);;
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
a {
  text-align: center;
  color: #252525;
  text-align: center;
  color: #ffffff;
  width:100%;
}
h1 {
  margin-right:auto;
  margin-left:auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #ffffff;
  width:50%;
}
.tb-img-view {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tb-container {
  width: 100%;
  margin: 4em auto;
}
.tb-container img {
  width: 200px;
  height: auto;
  display: none;
  margin-bottom: 30px;
}
.tb-container input {
  display: none;
}
.tb-container label {
  width: 200px;
  height: 45px;
  background: #2f9c74;
  color: #ffffff;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

In this CSS code, we have set the position of the parent div (.tb-container) to relative and added display property to hide the input field. The label element is styled as a button with a background color, padding, font-size, and border-radius properties. Lastly, the preview image element is set to display:none by default and will only be shown once a file has been selected.

JS

Now let’s add some JavaScript code to show the preview image of the selected file. Here’s the code for it:

const fileUpload = (event) => {
  const files = event.target.files;
  const filesLength = files.length;
  if (filesLength > 0) {
    const imageSrc = URL.createObjectURL(files[0]);
    const imagePreviewElement = document.querySelector("#tb-image");
    imagePreviewElement.src = imageSrc;
    imagePreviewElement.style.display = "block";
  }
};

This JavaScript code listens for the change event on the input file element and gets.

Technologies Used

• HTML / CSS / JavaScript

About the code

Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari

Responsive:- Yes

Dependencies: – N/A

Conclusion

In conclusion, creating a stylish file upload button with CSS and image preview feature can greatly enhance the user experience of your website. By providing users with a visually appealing and intuitive way to upload files, you can increase user engagement and improve the overall functionality of your site.

With the help of the code provided in this guide, you can easily create your own custom file upload button with a stylish design and image preview feature. Don’t be afraid to experiment with different styles and designs to find the perfect look for your website.

Remember to keep in mind the usability and accessibility of your file upload button as well. Make sure it is easily visible and functional for all users, including those with disabilities. With a little creativity and attention to detail, you can create a file upload button that not only looks great, but also enhances the overall user experience of your website.

Note: One important thing to note when using the file upload feature on your website is to ensure the security and validity of the uploaded files. Always validate and sanitize any user input to prevent potential security vulnerabilities and data breaches. Additionally, consider setting file type restrictions and size limitations to prevent users from uploading potentially harmful or excessively large files. By taking these precautions, you can ensure the safety and integrity of your website and its users.

Also Check: Stylish Popover Design with CSS: A User-Friendly Guide