Sample for HTML5 File Drop

by gakaki

HTML

<div id="dropzone" effectAllowed="move">Drog files here!</div>
<ul id="files"></ul>

CSS

#dropzone {
  background-color: #cfc;
  border: solid 3px #9c9;
  color: #9c9;
  min-height: 50px;
  padding: 20px;
  text-shadow: 1px 1px 0 #fff;
}

#dropzone.dropover {
  background-color: #cff;
  color: #9cc;
}

#files:empty::before {
  color: #ccc;
  content: "(Files data will be shown here.)";
}

#files {
  position: relative;
}

#files img {
  border: solid 1px #ccc;
  cursor: pointer;
  height: auto;
  margin: 0 0px;
  /* 	max-height: 128px;
	max-width: 128px; */
  width: auto;
}

#files .point {
  border: solid 1px #ccc;
  margin: 0 0px;
  width: 10px;
  height: 10px;
  position: absolute;
}

JavaScript

var URL_BLANK_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var elDrop = document.getElementById('dropzone');
var elFiles = document.getElementById('files');

elDrop.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
  showDropping();
});

elDrop.addEventListener('dragleave', function(event) {
  hideDropping();
});

elDrop.addEventListener('drop', function(event) {
  event.preventDefault();
  hideDropping();

  var files = event.dataTransfer.files;
  showFiles(files);
});

document.addEventListener('click', function(event) {
  var elTarget = event.target;
  if (elTarget.tagName === 'IMG') {
    var src = elTarget.src;
    var w = window.open('about:blank');
    var d = w.document;
    var title = escapeHtml(elTarget.getAttribute('title'));

    d.open();
    d.write('<title>' + title + '</title>');
    d.write('<img src="' + src + '" ></img>');
    d.close();
  }
});

function showDropping() {
  elDrop.classList.add('dropover');
}

function hideDropping() {
  elDrop.classList.remove('dropover');
}


function showFiles(files) {
  elFiles.innerHTML = '';

  for (var i = 0, l = files.length; i < l; i++) {
    var file = files[i];
    var elFile = buildElFile(file);
    elFiles.appendChild(elFile);
  }
}


function addPoint() {
  //  var text = file.name + ' (' + file.type + ',' + file.size + 'bytes)';
  //  elFile.appendChild(document.createTextNode(text));
 for (var i = 0, i < 5; i++) {
    var dom = document.createElement('div');
    dom.setAttribute("class", "point");
    elFiles.appendChild(dom);
  }
}

function buildElFile(file) {
  var elFile = document.createElement('li');

  //  var text = file.name + ' (' + file.type + ',' + file.size + 'bytes)';
  //  elFile.appendChild(document.createTextNode(text));

  if (file.type.indexOf('image/') === 0) {
    var elImage = document.createElement('img');
    elImage.src = URL_BLANK_IMAGE;
   ...