JSFiddle - React, Tailwind, and code Playground

by farhatdz

HTML

<a href="javascript:void 0">upload</a>
<input type="file" accept="image/*" ngf-select ng-model="picFile" ngf-max-size="2MB" required/>

<canvas width="300" height="300"></canvas>

CSS

input {
  height: 0;
  padding: 0;
  visibility: hidden;
}

pre {
  font-family: menlo, inconsolata, monaco, monospace;
}

JavaScript

$(function() {
  // trigger file select from anchor
  $("a").on("click", function(event) {
    // or ko.utils.triggerEvent($('input')[0], 'click')
    $("input").trigger("click");
  });

  // file selected
  $("input").on("change", function(event) {
    var image, file;

    // show file info
    $(".file-data").text(JSON.stringify(event.target.files[0], null, 2));

    image = new Image();
    file = new FileReader();

    // read file
    file.onload = function(event) {
      // image loaded
      image.onload = function() {
        // draw image to canvas
        var context = $("canvas")[0].getContext("2d");
        context.drawImage(image, 0, 0);
      };
      $(".file-base64").text(event.target.result);
      image.src = event.target.result;
    };
    file.readAsDataURL(event.target.files[0]);
  });
});