Javascript Preview and Delete Image Before Upload

Hi in this turorial we will learn through javascript how to preview upload image before uploading on server, when a user upload a image through upload button then we will alow user to upload image from computer thought browse option and in input tag type file we can only see the file name while uploading the image, and if user want to check what image her/ she has uploaded then there is no option by default, to rectify this while unpload the image throught input tag we will read the file though javascript and display that file on frontend once ther image sucessfully browsed by user while clicking on the input type file, we have also added delete option so if user want to change that image he/ she can diractly delete that image by clicking on delete button, This is pure javascript preview image while upload thought input tag we also have some jquery options like Preview and remove image before upload jquery codepen, Preview and remove image before upload jquery codepen javascript, this is very simple and implimented tutorial from simplifyscript you just need to plug and play only javascript input file upload tutorial

Please go though the Demo Below , image preview before upload javascript

Image preview with delete button

Upload File

Delete

Code Explaibation Javascript File Upload

HTML

  <div class="ss-image-upload-container">
      <div class="ss-image-input-box">
        <label for="fileUpload"
          ><span>Upload File</span>
          <input
            name="fileUpload"
            id="fileUpload"
            onchange="loadFile(event)"
            type="file"
          />
        </label>
      </div>
      <div class="image-preview">
        <img id="output" />
        <button class="delImage">Delete</button>
      </div>
    </div>

Created lable tag inside that input tag is implimented, which is hidden and by using for lable and input id concept, when user click on label, file browser opens the user select the image.Also putted image tag which have no source url until user upload the image, if user uploads the image the thought javascript will read the file and inject the image url in the image source attribute , preview image before upload using javascript

CSS

  <style>
      .ss-image-upload-container {
        width: 500px;
        height: 500px;
        background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        margin: 0 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        border-radius:10px;
      }
      #fileUpload {
        display: none;
      }
      .ss-image-input-box {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 20px;
      }
      .ss-image-input-box label {
        font-size: 24px;
        color: #000000;
        font-weight: bold;
        font-family: "arial";
        border-radius: 10px;
        padding: 15px 25px;
        background: #ffffff;
        cursor: pointer;
        transition: all ease-in-out 0.3s;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
          rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px,
          rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px,
          rgba(0, 0, 0, 0.07) 0px 32px 64px;
      }
      .ss-image-input-box label:hover {
        padding: 18px 28px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
          rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      .image-preview {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 15px;
        box-sizing: border-box;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        text-align: center;
        flex-direction: column;
        justify-content: space-around;
        height: 0;
      }
      .image-preview img {
        width: 100%;
        height: 300px;
        object-fit: contain;
      }

      .image-preview.animate-image {
        opacity: 1;
        height: 400px;

      }
      .image-preview.animate-image button {
        padding: 10px 15px;
        background: #ffffff;
        color: #000000;
        border-radius: 5px;
        cursor: pointer;
        font-size: 20px;
        border:none;

      }
    </style>

Above code we have implimented the style and the look of javascript file uploader modua, you can just copy and page or can customize this also. For animation ans ease css transition concept is implimented shen image opactivtiy and height changed.

Javascript

 <script>
      var loadFile = function (event) {
        var reader = new FileReader();
        reader.onload = function () {
          var output = document.getElementById("output");
          output.src = reader.result;

          document.querySelector(".image-preview").style.display = "flex";
          setTimeout(() => {
            document
              .querySelector(".image-preview")
              .classList.add("animate-image");
          }, 300);
          document
            .querySelector(".delImage")
            .addEventListener("click", function () {
              output.src = "";
              document
              .querySelector(".image-preview")
              .classList.remove("animate-image");

              setTimeout(function(){
                document.querySelector(".image-preview").style.display = "none";
              },200)
            });
            
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>