clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

Preview An Image Before It Is Uploaded Using javaScript

  Sumit Dey Sarkar
  07 Sep 2022
  JavaScript
Imperial Advance Hero Image

Preview An Image Before It Is Uploaded Using javaScript

In this tutorial we will learn how to Preview an image before it is uploaded using javascript.

Let's see example - 

How to preview an image before it is uploaded using javascript

1) Use below HTML ( You can use your own design)

when use your custom design then make sure that all the ' id ' attributes are added properly to your HTML where actually it can work. 

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview an image before it is uploaded using javascript</title>
</head>
<body>
  
  <div class="mainDiv">
    <label class="imgUploadBtn" for="profileImage">
      <img src="https://www.teknowize.com/attachments/file_1662497424.svg" alt="profile image" class="img-fluid" width="20">
      <input type="file" id="profileImage" hidden accept="image/*">
    </label>
    <img src="https://www.teknowize.com/attachments/file_1662497380.svg" alt="profile image" class="img-fluid" width="200" height="200">
    <div class="imgMainDiv">
      <img src="https://www.teknowize.com/attachments/file_1662497486.svg" id="ProImgId" alt="profile image" class="img-fluid">
    </div>
  </div>
  
</body>
</html>

 

2) Now write CSS to design above HTML using below code.

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }
    .mainDiv {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .imgMainDiv {
      position: absolute;
      background: #E9EAEB;
      width: 165px;
      height: 165px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden !important;
    }
    .imgMainDiv img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .imgUploadBtn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0px;
      right: 15px;
      background: #F3F3F4;
      border: 1px solid #2A5082;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
    }
    .imgUploadBtn:hover{
      background: #00f7ff;
    }

 

3) Use below js to show preview of selected image.

    profileImage.onchange = evt => {
      const [file] = profileImage.files
      if (file) {
        ProImgId.src = URL.createObjectURL(file)
      }
    }

 

Now combine all the HTML CSS and JS codes together

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preview an image before it is uploaded using javascript</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }
    .mainDiv {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .imgMainDiv {
      position: absolute;
      background: #E9EAEB;
      width: 165px;
      height: 165px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden !important;
    }
    .imgMainDiv img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
    .imgUploadBtn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 0px;
      right: 15px;
      background: #F3F3F4;
      border: 1px solid #2A5082;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
    }
    .imgUploadBtn:hover{
      background: #00f7ff;
    }
  </style>
</head>
<body>
  <div class="mainDiv">
    <label class="imgUploadBtn" for="profileImage">
      <img src="https://www.teknowize.com/attachments/file_1662497424.svg" alt="profile image" class="img-fluid" width="20">
      <input type="file" id="profileImage" hidden accept="image/*">
    </label>
    <img src="https://www.teknowize.com/attachments/file_1662497380.svg" alt="profile image" class="img-fluid" width="200" height="200">
    <div class="imgMainDiv">
      <img src="https://www.teknowize.com/attachments/file_1662497486.svg" id="ProImgId" alt="profile image" class="img-fluid">
    </div>
  </div>
  <script>
    profileImage.onchange = evt => {
      const [file] = profileImage.files
      if (file) {
        ProImgId.src = URL.createObjectURL(file)
      }
    }
  </script>
</body>
</html>

 

Output

Image Preview