JSFiddle - React, Tailwind, and code Playground

by lamp03

HTML

<input type="file" class="fileName" name="pic" id="user_image" accept="image/*">
  <a><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="button3"></div>
  <div class="button3">
     <h2>Submit</h2>
     <div class="loading-signal"></div>
     <div class="successful3"><i class="fa fa-check" aria-hidden="true"></i>
     </div>
  </div>
  <img id="uploaded_image"/>

JavaScript

$('.button3').click(function() {
        var fileName = $('.fileName').val().toString().toLowerCase();
        var fileSplit = fileName.split(".");
        console.log($("#user_image")[0].files);
        if (fileSplit[1] == "jpg" || fileSplit[1] == "png") {
           // below code will store the image.
           var file = $("#user_image")[0].files[0];
           
           // We will use file reader to read the content of file.
           var reader = new FileReader();
           reader.onload = function (e) {
                $('#uploaded_image').attr('src',e.target.result);
            }
        		reader.readAsDataURL($("#user_image")[0].files[0]);
           
        }
});