Preview an Image Before it is Uploaded using javaScript

AuthorSumit Dey Sarkar

Pubish Date07 Sep 2022

categoryJavaScript

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

 

Preview an Image Before it is Uploaded using javaScript

 

How to preview an image before it is uploaded using javascript

Let's see an example - 

 

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)
      }
    }

 

Here we combined all the HTML CSS and JS codes together (You can also use external CSS file according to your needs)

<!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

Comments 0

Leave a comment