Preview Image Before Upload Using JavaScript

Hello Everyone, Today in this blog you’ll learn how to Preview Image Before Upload or File Upload Button using HTML CSS & JavaScript. Earlier I’ve shared a blog on How to Create Text To Speech Converter in HTML & JavaScript. And now I’m going to create a File Upload Button.

In this program, at first, on the webpage, there is a file preview container 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. And when you hover on the file, the name of that file will appear on the bottom side of the preview container. There is also shown a cancel button (cross-sign) and when you click on that button, the preview file which 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.

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.

HTML


<!DOCTYPE html>
<!-- Created By Codegyan -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Preview Image Before Upload | Codegyan</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>
   </body>
</html>

CSS


@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%);
}

JavaScript


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; } 
});
Preview Image Before Upload Using JavaScript

Published on 05-Jan-2022 15:25:57

You may also like this!