JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <input type="file" accept="image/*" capture="camera" id="fileLoader" name="fileLoader" style="display: block" />
    <canvas id="bufferCanvas" style="display:none"></canvas>
    <img id="img1" class="imgs" style="display:block">
    <textarea id="textarea1" name="Pic1" rows="4" cols="50" style="display:none"></textarea>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="uploadImg.js"></script>
</body>

JavaScript

fileLoader = document.getElementById('fileLoader');
var bufferCanvas = document.getElementById('bufferCanvas');
var clickedImg = '';
var allImg = document.getElementsByClassName("imgs");
for (var i = 0; i < allImg.length; ++i) {
    allImg[i].style.cursor = "pointer";
    allImg[i].src = "https://cdn2.iconfinder.com/data/icons/picol-vector/32/image_add-128.png";
    allImg[i].onclick = function (e) {
        clickedImg = e.target || e.srcElement;//for ie 8 and before use e.srcElement
         $(fileLoader).trigger('click', e);
    }
}

fileLoader.addEventListener('change', handleFile, false);

textarea1 = document.getElementById('textarea1');
var ctx = bufferCanvas.getContext('2d');

function handleFile(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
	alert("reader.onload called"); //<-----
        var img = new Image();
        img.onload = function () {
            clickedImg.src = img.src;
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}