JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<input id="select-image" type="file"   multiple="multiple"/>

<div id="result">

</div>

JavaScript

var myinput = document.getElementById("select-image");

myinput.addEventListener("change", function(){
    fetchimage();
});

function fetchimage(){
var filelist = myinput.files || [];
   for (var i = 0; i < filelist.length; i++) {
    //console.log('found file ' + i + ' = ' + filelist[i].name);
    
    //loadimage(filelist[i]);
   getBase64(filelist[i], i);
     
         
         
   }//end for
   
}


function imageToDataUri(img, width, height) {

    // create an off-screen canvas
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    // set its dimension to target size
    canvas.width = width;
    canvas.height = height;

    // draw source image into the off-screen canvas:
    ctx.drawImage(img, 0, 0, width, height);

    // encode image to data-uri with base64 version of compressed image
    return canvas.toDataURL();
}

function getBase64(file, ai) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     //console.log(reader.result);
     document.getElementById("result").innerHTML += '<img src="'+reader.result+'"  id="img_'+ai+'" class="img"/>';
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}