JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/md5.min.js"></script>
<div class="input">
  <div id="droppable-zone">
    <div id="droppable-zone-wrapper">
      <div id="droppable-zone-text">Drop File Here</div>
    </div>
    <input id="input" type="file" placeholder="Input2" class="droppable-file">
  </div>
</div>
<div class="submit">
  <input id="execute" type="button" value="Hash" class="btn btn-default">
  <label>
    <input id="auto-update" type="checkbox" value="1" checked="checked">Auto Update
  </label>
</div>
<div class="output">
  <textarea id="output" placeholder="Output"></textarea>
</div>

CSS

body,
html,
h1,
h2 {
  margin: 0;
  padding: 0;
  font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  color: #333;
}

a,
a:visited {
  color: #828282;
  text-decoration: none;
}

a:hover,
a.active {
  color: #4183c4;
}

#header {
  background-color: #2d2d2d;
  color: white;
  text-align: center;
}

#header a {
  color: white;
}

#body {
  width: 1024px;
  margin: 0 auto;
  margin-top: 20px;
}

#body:after {
  content: '';
  clear: both;
  display: block;
}

#sidebar {
  float: left;
  width: 327px;
  margin-left: 20px;
}

#sidebar:after {
  content: '';
  clear: both;
  display: block;
}

.col {
  width: 50%;
  float: left;
}

.option-block {
  padding: 5px;
  border-bottom: 3px dashed #D0CCCC;
}

#bits {
  width: 100px;
}

.menu {
  padding: 0;
  margin: 0;
}

.menu li {
  list-style: none;
}

.menu li a,
.menu-group {
  display: block;
  min-height: 30px;
  line-height: 30px;
  padding-left: 20px;
}

.menu-group {
  font-weight: bold;
}

.menu li a:hover,
.menu li a.active {
  padding-left: 19px;
  border-left: 1px solid #828282
}

#index:after {
  content: '';
  clear: both;
  display: block;
}

#index .menu {
  float: left;
  min-width: 200px;
}

#main {
  float: left;
  width: 677px;
}

#main h1 {
  margin: 10px 0;
  border-bottom: 1px solid #eee;
}

.description {
  color: gray;
  margin: 10px 0;
}

.submit {
  height: 60px;
  line-height: 50px;
  text-align: center;
}

#droppable-zone {
  border: 10px dashed #ccc;
  height: 200px;
  width: 650px;
  position: relative;
  overflow: hidden;
}

#droppable-zone.hover {
  border: 10px dashed #aaa;
}

#droppable-zone-wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

#droppable-zone-text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 33px;
  overflow: hidden;
}

.droppable-file {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

textarea {
 ...

JavaScript

$(document).ready(function() {

  var input = $('#input'),
  		output = $('#output'),
      checkbox = $('#auto-update'),
      dropzone = $('#droppable-zone');

  var execute = function() {
    try {
      output.val(md5(input.val()));
    } catch (e) {
      output.val(e);
    }
  }

  function autoUpdate() {
    if (!checkbox[0].checked) {
      return;
    }
    execute(function(loadedPercent){
    	console.log("loaded %o percent", loadedPercent);
    }, function(hash){
    	console.info("MD%-Hash of file is %o", hash);
    });
  }

  if (checkbox.length > 0) {
    input.bind('input propertychange', autoUpdate);
    checkbox.click(autoUpdate);
  }

  if (dropzone.length > 0) {
  
    var dropzonetext = $('#droppable-zone-text');

    $(document.body).bind('dragover drop', function(e) {
      e.preventDefault();
      return false;
    });

    if (!window.FileReader) {
      dropzonetext.text('Your browser dose not support.');
      $('input').attr('disabled', true);
      return;
    }

    dropzone.bind('dragover', function() {
      dropzone.addClass('hover');
    });

    dropzone.bind('dragleave', function() {
      dropzone.removeClass('hover');
    });

    dropzone.bind('drop', function(e) {
      dropzone.removeClass('hover');
      file = e.originalEvent.dataTransfer.files[0];
      dropzonetext.text(file.name);
      autoUpdate();
    });

    input.bind('change', function() {
      file = input[0].files[0];
      dropzonetext.text(file.name);
      autoUpdate();
    });

    var file, reader;
    execute = function(onLoad, onSuccess, onError) {
    
      var batch = 1024 * 1024 * 2,
      		start = 0,
      		total = file.size,
          hasOnLoad = typeof onLoad === 'function',
          hasOnSuccess = typeof onSuccess === 'function',
          hasOnError = typeof onError === 'function';
          
      reader = new FileReader();
      reader.onerror = onError;
      reader.onload = function(event) {
        try {
          md5 =...