JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="dropZone" class="mb msg r8a">
  Drop-Zone
  <small class="block" style="font-size:13px;">images only</small>
</div>

<dl id="result" class="mb msg r8a clearfix">
  <dt>File Name</dt>
  <dd>File Size(bytes)</dd>
</dl>

<form id="optionsForm" class="mt">
  <a href="javascript:void(0);" class="circleButton">Save!</a>
</form>

CSS

#dropZone {
  padding:2em;
  text-align:center;
  font-size:20px;
  box-shadow: 1px 1px 1px #ddd;
}

#result {
  font-size:90%;
  margin-bottom:1em;
  line-height:1.3;
  padding:5px;
  border:1px solid #fc6;
  background-color:#ffc;
}

#result dt {
  width:14em;
  margin-bottom:0.2em;
  float:left;
  text-align:left;
  font-weight:bold;
}

#result dd {
  border-left:2px solid #fc6;
  padding-left:10px;
  margin-left:15em;
  margin-bottom:0.2em;
}

#uploadForm {
  display:none;
}

#uploadForm a {
  margin:0 auto;
}

JavaScript

var d = document;

function setFileDropEvent()
{
  d.documentElement.addEventListener('drop', function(e){
    e.preventDefault();
    updateFileDrop(e.dataTransfer.files);
  }, false);

  d.documentElement.addEventListener('dragover', function(e){
    e.preventDefault();
  }, false);

  var dz = d.getElementById('dropZone');

  dz.addEventListener('change', function(){
    updateFileDrop(dz.files);
  }, false);
}

function updateFileDrop(files)
{
  var f = null;
  var error = 0;

  for (var i = 0, l = files.length; i < l; i++)
  {
    f = files[i];

    if (f.type === 'image/png')
    {
      if (f.name.match(/\.png$/))
      {
        $('#result').append('<dt>' + f.name.replace(/\.png$/, '') + '</dt>');
        $('#result').append('<dd>(<b>' + f.size + '</b> bytes)</dd>');
      }
    }
    else
    {
      error++;
    }
  }

  if (error > 0)
  {
    alert('must be image file');
    return false;
  }

  if (files.length !== error)
  {
    $('#optionsForm').slideDown();
    return true;
  }
}


function convertHTML(file)
{
  var r = d.createElement('div');
  r.setAttribute('class', 'result');

  var info = d.createElement('div');
  var name = d.createElement('b');
  name.appendChild(document.createTextNode(file.realname));
  info.appendChild(name);
  var text = ' (' + file.size + ' bytes)';
  info.appendChild(document.createTextNode(text));
  r.appendChild(info);

  return r;
}


$(document).ready(function(){
  $('#optionsForm').hide();
  setFileDropEvent();
});