JSFiddle - React, Tailwind, and code Playground

JavaScript

function resizeImage(i,w,h){with(document.createElement("canvas"))return width=w,height=h,getContext("2d").drawImage(i,0,0,w,h),toDataURL()}//DomImage width height
function readFile(a,b){with(new FileReader)onload=b,readAsDataURL(a)}//File callback
function loadImage(a,b){with(new Image)onload=b,src=a}//Image callback

function fileHandler(e){
 for(var a=0,b;b=e.target.files[a];++a){
  readFile(e.target.files[0],imageHandler)
 }
}
function imageHandler(e){
 loadImage(this.result,sizeHandler)
}
function sizeHandler(e,w,h,r){
 W=this.width;H=this.height;r=size/Math.max(W,H);
 loadImage(resizeImage(this,(W*r+.5)|0,(H*r+.5)|0),appendThis)
}
function appendThis(){
 document.body.appendChild(this);
}

var size=16;

window.onload=function(){
 var fileBox=document.createElement('input');
 fileBox.type='file';
 fileBox.multiple=true;
 fileBox.addEventListener('change',fileHandler,false);
 document.body.appendChild(fileBox)
}