JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<div id="dropzone" dropzone>
    Drop here
</div>

<ul data-bind="foreach: files">
    <li>
        <strong data-bind="text:name"></strong>
        (<span data-bind="text:type"></span>) - 
        <span data-bind="text:size"></span> bytes,
        last modified: <span data-bind="text:date"></span>
    </li>
</ul>

CSS

#dropzone {
    border-style: dotted;
    width: 200px;
    height: 100px;
}

JavaScript

var File, viewModel;
File = (function() {
  function File() {
    this.name = ko.observable('');
    this.type = ko.observable('n/a');
    this.size = ko.observable(0);
    this.date = ko.observable('');
  }
  return File;
})();
viewModel = {
  files: ko.observableArray()
};
$('#dropzone').bind('dragover', function(e) {
  e.stopPropagation();
  e.preventDefault();
  return e.dataTransfer.dropEffect = 'copy';
}).bind('drop', function(e) {
  var f, _i, _len, _ref, _results;
  e.stopPropagation();
  e.preventDefault();
  _ref = e.dataTransfer.files;
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    f = _ref[_i];
    _results.push(viewModel.push(new File({
      name: escape(f.name),
      type: f.type,
      size: f.size,
      date: f.lastModifiedDate.toLocaleDateString()
    })));
  }
  return _results;
});
ko.applyBindings(viewModel);