JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

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 file = this.files
    $.when.apply($, $.map(file, function(img, i) {

      return new $.Deferred(function(dfd) {
        var 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() + "\" target=\"_blank\">" + e.data + "</a>");
          dfd.resolve()
          URL.revokeObjectURL(this.src);
        });
        image.src = URL.createObjectURL(img);
        return dfd.promise()
      })
    })).then(function() {
      nav.find("a").each(function() {
        console.log(this.href + "\n");
      })
    })
  });
})