JSFiddle - React, Tailwind, and code Playground

HTML

<div><input type='file' id="upload" /></div>
<div><img id='img'></div>
<div><button id='resizebutton'>Resize</button></div>

JavaScript

var file;
var img = document.getElementById("img");

const inputElement = document.getElementById("upload");
inputElement.addEventListener("change", handleFiles, false);

const resizeButton = document.getElementById("resizebutton");
resizeButton.addEventListener("click", resize, false);

function resize() {
  resizeImage({
    file: file,
    maxSize: 100,
  }).then(function (resizedImage) {
      img.src =  URL.createObjectURL(resizedImage)
  }).catch(function (err) {
      console.error(err);
  });
}


function handleFiles(val) {
	file = this.files[0];
  var fr = new FileReader();
  fr.onload = function () {
    img.src = fr.result;
  }
  fr.readAsDataURL(file);
}

function resizeImage(settings) {
    var file = settings.file;
    var maxSize = settings.maxSize;
    var reader = new FileReader();
    var image = new Image();
    var canvas = document.createElement('canvas');
    var dataURItoBlob = function (dataURI) {
        var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
            atob(dataURI.split(',')[1]) :
            unescape(dataURI.split(',')[1]);
        var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var max = bytes.length;
        var ia = new Uint8Array(max);
        for (var i = 0; i < max; i++)
            ia[i] = bytes.charCodeAt(i);
        return new Blob([ia], { type: mime });
    };
    var resize = function () {
        var width = image.width;
        var height = image.height;
        if (width > height) {
            if (width > maxSize) {
                height *= maxSize / width;
                width = maxSize;
            }
        } else {
            if (height > maxSize) {
                width *= maxSize / height;
                height = maxSize;
            }
        }
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
        var dataUrl = canvas.toDataURL('image/jpeg');
        return dataURItoBlob(dataUrl);
 ...