JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="browseImages" multiple="multiple" accept="image/*">
<output id="list"></output>

JavaScript

document.getElementById('browseImages').addEventListener('change', handleFileSelect, true);

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0; i < files.length; i++) {
        var f = files[i];
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
		createCanvas(f);
    }
  }

function createCanvas(f){
    var canvas = document.createElement('canvas');
    canvas.width  = 110;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = window.URL.createObjectURL(f);
    window.URL.revokeObjectURL(f);
        
    img.onload = function() {
    	ctx.drawImage(img, 0, 0, 100, 100);
	}
    
    document.getElementById('list').appendChild(canvas);
};