JSFiddle - React, Tailwind, and code Playground

by aanita0309

HTML

<div>
  <input type=text id=txtPreviewLnk  placeholder="Post image URL here" > 
</div>

<br/> <br/>
  
<div id="uploader"><span>drag  & drop here your images for preview</span>
    <img src="" class="preview"/>
</div>
<input type="file"  id="filePhoto" />

CSS

#uploader {position:relative; overflow:hidden; width:300px; height:350px; background:transparent; border:2px dashed #e8e8e8;cursor:pointer;padding:5px;color:#555;font-family:'Segoe UI';font-weight:bold;}

#uploader:hover{color:#999;}

#filePhoto{
    display:none;
}

#uploader img{
    position:absolute;
    width:312px;
    height:362px;
    top:-1px;
    left:-1px;
    z-index:-1;
    border:none;
    background-color: #eee;
   
}
#txtPreviewLnk{
  width:300px;
}
.preview{
     display:none;
}

JavaScript

var imageLoader = document.getElementById('filePhoto');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        $('#uploader img').attr('src',event.target.result);
        $('#uploader img').css("display", "block");
        $('#uploader span').html("");
    }
    
    reader.readAsDataURL(e.target.files[0]);
    
}

var dropImg;
dropImg = document.getElementById("uploader");
dropImg.addEventListener("dragenter", dragenter, false);
dropImg.addEventListener("dragover", dragover, false);
dropImg.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;
  
 
  imageLoader.files = files;
}

$('#txtPreviewLnk').on('change', function() {
     $('img.preview').prop('src', this.value);
       $('img.preview').css("display", "block");
       $('#uploader span').html("");
});