Preview Image Before Upload in HTML CSS & JavaScript

12
Preview Image Before Upload in HTML CSS & JavaScript

Hello readers, In this blog, you’ll learn how to Preview an Image Before Uploading or create a File Upload Button using HTML, CSS, and JavaScript. Earlier, I shared a blog on how to Check Email Validation in JavaScript. Now, I’m going to create a File Upload Button.

In this program, at first, there is a file preview container on the webpage with a cloud icon and an upload button. When you click on the choose a file button there will open a new window to select an image or file. After selecting the file, the preview of that file is shown on the preview container. When you hover over the file, the name of that file will appear on the bottom side of the preview container. There is also a cancel button (cross-sign) and when you click on that button, the preview file that you selected will be hidden or canceled.

This program is only possible with the JavaScript files object. The file property returns a FileList object, describing the file or files selected with the file upload button. Through the FileList object, you can get the name, size, and contents of the files. This property is read-only.

If you’re finding it difficult to understand what I am saying. You can watch a full video tutorial on this program (Preview Image Before Upload or File Upload Button).

Video Tutorial of Preview Image Before Upload

In the video, you have seen how this program works and I hope you have understood the basic codes behind creating this program. As you already know, the upload and preview features of this program are only possible with JavaScript. You can also create a simple or default file upload button using only an HTML tag (<input> type file).

If you’re a beginner and you know only HTML & CSS then you can use this program on your website, project, and HTML page or if you know JavaScript then you can add advanced features in this program and take this program to the next level.

If you like this program (Preview Image Before Upload) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

Preview Image Before Upload or File Upload Button [Source Codes]

To create this program (Preview Image Before Upload). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Preview Image Before Upload | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="container">
         <div class="wrapper">
            <div class="image">
               <img src="" alt="">
            </div>
            <div class="content">
               <div class="icon">
                  <i class="fas fa-cloud-upload-alt"></i>
               </div>
               <div class="text">
                  No file chosen, yet!
               </div>
            </div>
            <div id="cancel-btn">
               <i class="fas fa-times"></i>
            </div>
            <div class="file-name">
               File name here
            </div>
         </div>
         <button onclick="defaultBtnActive()" id="custom-btn">Choose a file</button>
         <input id="default-btn" type="file" hidden>
      </div>
      <script>
         const wrapper = document.querySelector(".wrapper");
         const fileName = document.querySelector(".file-name");
         const defaultBtn = document.querySelector("#default-btn");
         const customBtn = document.querySelector("#custom-btn");
         const cancelBtn = document.querySelector("#cancel-btn i");
         const img = document.querySelector("img");
         let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
         function defaultBtnActive(){
           defaultBtn.click();
         }
         defaultBtn.addEventListener("change", function(){
           const file = this.files[0];
           if(file){
             const reader = new FileReader();
             reader.onload = function(){
               const result = reader.result;
               img.src = result;
               wrapper.classList.add("active");
             }
             cancelBtn.addEventListener("click", function(){
               img.src = "";
               wrapper.classList.remove("active");
             })
             reader.readAsDataURL(file);
           }
           if(this.value){
             let valueStore = this.value.match(regExp);
             fileName.textContent = valueStore;
           }
         });
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.container{
  height: 350px;
  width: 430px;
  position: relative;
}
.container .wrapper{
  position: relative;
  height: 300px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  border: 2px dashed #c2cdda;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wrapper.active{
  border: none;
}
.wrapper .image{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.wrapper .icon{
  font-size: 100px;
  color: #9658fe;
}
.wrapper .text{
  font-size: 20px;
  font-weight: 500;
  color: #5B5B7B;
}
.wrapper #cancel-btn i{
  position: absolute;
  font-size: 20px;
  right: 15px;
  top: 15px;
  color: #9658fe;
  cursor: pointer;
  display: none;
}
.wrapper.active:hover #cancel-btn i{
  display: block;
}
.wrapper #cancel-btn i:hover{
  color: #e74c3c;
}
.wrapper .file-name{
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 8px 0;
  font-size: 18px;
  color: #fff;
  display: none;
  background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);
}
.wrapper.active:hover .file-name{
  display: block;
}
.container #custom-btn{
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg,#3a8ffe 0%,#9658fe 100%);
}

That’s all, now you’ve successfully created a Preview Image Before Upload in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Previous articleAwesome Input Animation using HTML & CSS | Floating Label Animation
Next articleButton Ripple Effect in HTML CSS & JavaScript

12 COMMENTS

  5. Friend, I am using Angular and I have a problem, can you help me?

    addCard:26 Uncaught ReferenceError: defaultBtnActive is not defined
    at HTMLButtonElement.onclick (addCard:26)

  6. Hi frien, i am using Angular but I have a problem, Can you help me?

    Look my error

    addCard:26 Uncaught ReferenceError: defaultBtnActive is not defined
    at HTMLButtonElement.onclick (addCard:26)

  7. hello sis, my name is arif from Indonesia, i am in grade 3 at junior high school since the pandemic i have not had any material about coding from my teacher since i got to know the nepal coding channel i have quite memorized the website design thank you sis

LEAVE A REPLY

Please enter your comment!
Please enter your name here