JSFiddle - React, Tailwind, and code Playground

by 4ngsTrIb1DI5te5H

HTML

<form action="#" method="post">
  <input type="file" accept="image/*" multiple />
  <button type="button">Select Photos</button>
</form>
<!--<nav></nav>-->
<div></div>

CSS

input[type="file"] {
  display: none;
}

body {
  overflow-wrap: break-word;
  width: 400px;
  word-wrap: break-word;
}

/*
a {
  display: inline-block;
  margin: 6px;
}
*/

p {
  font-size: 7.5pt;
}

JavaScript

console.clear();

$(function () {
	$("button[type=button]").on("click", function (
  	e) {
    $("input[type=file]").trigger("click");
	});
  
  $("input[type=file]").on("change", function (
  	e) {
    //var nav = $("nav").empty();
    var div = $("div").empty();
    
    for (var i = 0, l = this.files.length; i < l; i++) {
    	var file = this.files[i],
      		reader = new FileReader();
          
      $(reader).on("load", {
      	i: i,
        name: file.name
			}, function (
      	e) {
        var r = reader.result;
        
        //nav.append("<a href=\"" + r + "\" target=\"_blank\">" + e.data + "</a>");
        div.append("<h4>#" + e.data.i + " - " + e.data.name + "</h4>").append("<p>" + r + "</p>");
			});
      
      reader.readAsDataURL(file);
      
    	/*
    	var file = this.files[i],
      		image = new Image();
          
      $(image).on("load", i, function (
      	e) {
        var canvas = document.createElement("canvas"),
        		context = canvas.getContext("2d");
        
      	canvas.height = this.height;
      	canvas.width = this.width;
      	
        context.drawImage(this, 0, 0);
        
        nav.append("<a href=\"" + canvas.toDataURL("image/jpeg") + "\" target=\"_blank\">" + e.data + "</a>");
        
        URL.revokeObjectURL(this.src);
			});
      
      image.src = URL.createObjectURL(file);
      */
    }
	});
});