Bootstrap Resizable Panel

Bootstrap Resizable Panel

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="exampleInputFile">File Input</label>
      <input type="file" class="form-control" id="exampleInputFile">
    </div>
  </form>
  <div class="panel panel-default">
    <div class="panel-heading">File Preview</div>
    <div class="panel-body preview-panel" id="filePreview"></div>
  </div>
</div>

CSS

.preview-panel {
  white-space: pre-line;
  overflow-y: scroll;
  min-height: 100px;
}

JavaScript

$("#filePreview").resizable({
  handles: "n, s",
  minHeight: 100
});

function readFile(file) {
  var reader = new FileReader();
  reader.onload = readSuccess;

  function readSuccess(evt) {
    $('#filePreview').text(evt.target.result);
    $("#filePreview").resizable({
      handles: "n, s",
      minHeight: 100
    });
  };
  reader.readAsText(file);
}

$(document).on('change', '#exampleInputFile', function() {
  readFile(this.files[0]);
});