Image Upload with Preview

by Dave Land

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/d98d4230d7.js"></script>
 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <i class="fa fa-picture-o"></i>
     <div id="img_bg">
       <img id="menu_image" class="preview_img" />
       <i class="fa fa-close"></i>
     </div>
     <textarea name="post_reply"></textarea>
    <div id="spinner"></div>
 </div>

CSS

.img-upload-section {
  width: 420px;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-upload-section textarea[name="post_reply"] {
  background-color: #E5E5E5;
  border-color: rgba(000, 000, 000, 0.25); 
}

.img-upload-section > #img_bg {
  position: absolute;
  top: 5px;
  /* left: 6px; */
  background-color: #E5E5E5;
  padding: 5px;
  outline: 1px solid rgba(000, 000, 000, 0.25);
  width: calc(400px - 4px);
  max-height: calc(400px - 4px);
  min-height: calc(90px - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-upload-section img {
  max-width: calc(400px - 3px);
  max-height: calc(400px - 3px);
}

input[type="file"] {
  display: none;
}
textarea[name="post_reply"] {
  width: 400px;
  height: 90px;
}

i.fa.fa-picture-o::before {
  /* content: "\f03e"; */
  /* font-family: fontawesome; */
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1rem;
  font-style: normal;
  /* background-color: white; */
  color: #489CBA;
  display: inline-block;
  padding: 0px 1px;
}

#spinner {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #E5E5E5;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#spinner::before {
  content: "\f110";
  font-size: 3rem;
  font-family: fontawesome;
}

i.fa.fa-close {
  position: absolute;
  top: -9px;
  right: -8px;
  background-color: white;
  border-radius: 50%;
  padding: 1px 2px 1px 2px;
  border: 2px solid;
  font-size: 0.75rem;
}

JavaScript

document.getElementById("menu_images").onchange = function () {
		/* $('#spinner').show(); */
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
       $('#img_bg').show();
       $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
    $('#spinner').hide();
};

document.querySelector('.img-upload-section i.fa-picture-o').addEventListener('click',function(e) {
  document.querySelector('input[name="image3"]').click();
  e.stopPropagation();
})

document.querySelector('#img_bg i.fa-close').addEventListener('click',function(e) {
  $('#img_bg').hide();
  e.stopPropagation();
})

$('#img_bg').hide();
$('#spinner').hide();