JSFiddle - React, Tailwind, and code Playground

by Jacques Marais

HTML

<input type="file" name="pic_file" id="photo_file">

JavaScript

var photofile = document.getElementById("photo_file");
    
photofile.onchange = function(){
    if (photofile.files && photofile.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var result = e.target.result;
            photofile.insertAdjacentHTML("afterend", "<a href='" + result + "' target='_blank'><img src='" + result + "' id='image_holder'/></a>");
        }

        reader.readAsDataURL(this.files[0]);
    }    
};