masawada/folder_drag_and_drop.html

## folder_drag_and_drop.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>directory upload</title>
  <style>
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html, body {
  width: 100%;
  height: 100%;
}

#dropzone {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.hover {
  border: solid 5px #AA0000;
}

li {
  font: normal 14px/18px sans-serif;
  border: solid 1px #F0F0F0;
  padding: 5px;
}
  </style>
  <script>
window.addEventListener('load', function() {
  var dropzone = document.querySelector('#dropzone');
  var filelist = document.querySelector('#filelist');

  // https://gist.github.com/tiff/3076863
  var traverseFileTree = function self(item, path) {
    path = path || "";
    if (item.isFile) {
      // Get file
      item.file(function(file) {
        var li = document.createElement('li');
        li.innerText = path + file.name;
        filelist.appendChild(li);
      });
    } else if (item.isDirectory) {
      // Get folder contents
      var dirReader = item.createReader();
      dirReader.readEntries(function(entries) {
        for (var i = 0; i < entries.length; i++) {
          self(entries[i], path + item.name + "/");
        }
      });
    }
  };


  var dropEvent = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
      // recursive directory search
      traverseFileTree(e.dataTransfer.items[i].webkitGetAsEntry());
    }

    dropzone.classList.remove('hover');
    e.stopPropagation();
    e.preventDefault();
    return false;
  };

  var dragEnter = function(e) {
    dropzone.classList.add('hover');
    e.stopPropagation();
    e.preventDefault();
  };

  var dragOver = function(e) {
    e.stopPropagation();
    e.preventDefault();
  };

  var dragLeave = function(e) {
    dropzone.classList.remove('hover');
    e.stopPropagation();
    e.preventDefault();
  };

  dropzone.addEventListener('dragenter', dragEnter, false);
  dropzone.addEventListener('dragover', dragOver, false);
  dropzone.addEventListener('dragleave', dragLeave, false);
  dropzone.addEventListener('drop', dropEvent, false);
});
  </script>
</head>
<body>
  <div id="dropzone">
    <ul id="filelist"></ul>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>directory upload</title>
	<style>
	/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

	html, body {
	width: 100%;
	height: 100%;
	}

	#dropzone {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	}

	.hover {
	border: solid 5px #AA0000;
	}

	li {
	font: normal 14px/18px sans-serif;
	border: solid 1px #F0F0F0;
	padding: 5px;
	}
	</style>
	<script>
	window.addEventListener('load', function() {
	var dropzone = document.querySelector('#dropzone');
	var filelist = document.querySelector('#filelist');

	// https://gist.github.com/tiff/3076863
	var traverseFileTree = function self(item, path) {
	path = path \|\| "";
	if (item.isFile) {
	// Get file
	item.file(function(file) {
	var li = document.createElement('li');
	li.innerText = path + file.name;
	filelist.appendChild(li);
	});
	} else if (item.isDirectory) {
	// Get folder contents
	var dirReader = item.createReader();
	dirReader.readEntries(function(entries) {
	for (var i = 0; i < entries.length; i++) {
	self(entries[i], path + item.name + "/");
	}
	});
	}
	};


	var dropEvent = function(e) {
	var length = e.dataTransfer.items.length;
	for (var i = 0; i < length; i++) {
	// recursive directory search
	traverseFileTree(e.dataTransfer.items[i].webkitGetAsEntry());
	}

	dropzone.classList.remove('hover');
	e.stopPropagation();
	e.preventDefault();
	return false;
	};

	var dragEnter = function(e) {
	dropzone.classList.add('hover');
	e.stopPropagation();
	e.preventDefault();
	};

	var dragOver = function(e) {
	e.stopPropagation();
	e.preventDefault();
	};

	var dragLeave = function(e) {
	dropzone.classList.remove('hover');
	e.stopPropagation();
	e.preventDefault();
	};

	dropzone.addEventListener('dragenter', dragEnter, false);
	dropzone.addEventListener('dragover', dragOver, false);
	dropzone.addEventListener('dragleave', dragLeave, false);
	dropzone.addEventListener('drop', dropEvent, false);
	});
	</script>
	</head>
	<body>
	<div id="dropzone">
	<ul id="filelist"></ul>
	</div>
	</body>
	</html>