JSFiddle - React, Tailwind, and code Playground

by amantur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-lg-3">
      <select id="a">
        <option value="string">As Binary String</option>
        <option value="data">As Data Url</option>
        <option value="Text">As Text</option>
      </select>
      <br/>
    </div>
  </div>
  <p></p>
  <div class="row">
    <div class="col-md-4 col-sm-4 col-lg-2">
      <input type="file" id="file1" />
    </div>
    <div class="col-md-4 col-sm-4 col-lg-2">
      <button id="b1" type='button' class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> Read</button>
    </div>
  </div>
  <p></p>
  <div class="row">
    <div class="col-md-6 col-sm-6 col-lg-8 text-warning">
      <div id="result"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-push-2 col-sm-push-2 col-lg-push-3 col-md-8 col-sm-8 col-lg-6 text-warning">
      <img id="img1" src="" alt="" class="data-image" />
    </div>
  </div>
</div>

CSS

.data-image {
  max-height: 250px;
  max-width: 250px;
  border: 2px solid green;
  clear: both;
}

JavaScript

$("#b1").on("click", function() {
  var f = document.getElementById('file1').files[0]; // name of image
  var files = document.getElementById('file1').files;
  var r = new FileReader();

  r.onload = function(event) {
    console.log(f, event.target.result);
  }

  r.onloadend = function(e) {
    var data = e.target.result;
    $("#result").text(data);
    if (v === "data") {
      $("#img1").prop("src", data);
    }
  }
  if (!f) return;
  var v = $("#a option:selected").val();
  if (v === "string") {
    r.readAsBinaryString(f);
  } else if (v === "data") {
    r.readAsDataURL(f);
  } else if (v === "Text") {
    r.readAsText(f);
  }
});