added folder drop support

README

@@ -1,3 +1,6 @@
-Drag and drop handled by Nodejs
+Drag and drop upload using awesome stuff like multiple file selection, pseudo-drop-areas and nodejs
 ==============
-TODO: update on new files with server sent events
+Only works for for dropping folders, I'm trying to solve the whole mess of creating folders recursively
+TODO: Single file uploads
+TODO: update on new files with server sent events (kinda works but its buggy)
+

index.js

@@ -33,21 +33,29 @@ app.get('/', function(req, res){
 })
 
 app.post('/upload', function(req, res){
-	filelist.files = [];
-	var form = new formidable.IncomingForm();
-		form.parse(req, function(err, fields, files) {
-			for(var i in files) {
-				filelist.files.push("/upload/" + files[i].name);
-				filelist.timestamp = (new Date()).toLocaleTimeString();
-				fs.rename(files[i].path, __dirname + "/static/upload/" + files[i].name, function(err) {
-					if (err) {
-						fs.unlink(__dirname + "/static/upload/" + files[i].name);
-						fs.rename(files[i].path, __dirname + "/static/upload/" + files[i].name);
-					}
-				});
-			}
-
-		});
+	var form = new formidable.IncomingForm()
+
+	form.parse(req, function(err, fields, files){
+		if(files['file0'].name.split('/').length > 1) {
+			var directory = files['file0'].name.split('/')[0];
+			fs.mkdir(__dirname + '/static/upload/' + directory, 0777, function (err) {
+				if(err) console.log('Folder could not be created ' + err)
+			})
+		}
+		for(var i in files) {
+			filelist.files.push("/upload/" + files[i].name);
+			console.log(files[i].name);
+			filelist.timestamp = (new Date()).toLocaleTimeString();
+			fs.rename(files[i].path, __dirname + "/static/upload/" + files[i].name, function(err) {
+				if (err) {
+
+					fs.unlink(__dirname + "/static/upload/" + files[i].name);
+					fs.rename(files[i].path, __dirname + "/static/upload/" + files[i].name);
+
+				}
+			});
+		}
+	})
 });
 
 app.get('/update', function(req, res){

package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "express":"*",
-    "jade":"*"
+    "jade":"*",
+    "formidable":"*"
     },
   "engines": {
     "node": "*"

static/js/script.js

@@ -1,25 +1,11 @@
-var droparea = document.getElementById("container");
 var output = document.getElementById('message');
 var itemlist = document.getElementById('itemlist');
 var timestamp=0;
 
-droparea.ondragover = function() {
-	var _class = this.className;
-	if(_class.trim() != 'hover' ) this.className += 'hover';
-	else output.innerHTML = 'Drop files anywhere in here';
-	output.className = '';
-}
-
-droparea.ondragend = function() {
-	// nothing to do here
-}
-
-droparea.ondrop = function(e) {
-	e.preventDefault();
-	this.className = '';
-
-	var files = event.dataTransfer.files;
-	var formData = new FormData();
+document.getElementById('dropTarget').addEventListener("change", function (e) {
+	output.innerHTML = "";
+	var files = e.target.files
+		, formData = new FormData();
 
 	for (var i = 0; i < files.length; i++) {
 		formData.append('file' + i, files[i]);
@@ -34,12 +20,11 @@ droparea.ondrop = function(e) {
 		} else {
 			output.innerHTML = "Error " + oXHR.status + " occurred uploading your file.<br \/>";
 		}
-	};
+	}
 
-	oXHR.send(formData);
-
-	return false;
-}
+	oXHR.send(formData)
+
+}, false);
 
 var appendItems = function(file) {
 	var content = '';
@@ -61,8 +46,6 @@ if (!!window.EventSource) {
 		var data = JSON.parse(e.data);
 		if(timestamp == data.timestamp) return;
 		else {
-			console.log(timestamp);
-			console.log(data.timestamp);
 			appendItems(data.files);
 			timestamp = data.timestamp;
 		}

static/stylesheets/style.css

@@ -109,4 +109,15 @@ ul li {
 			top:10px;
 			right:10px;
 			color:#bbb;
-		}
+		}
+
+#dropContainer {
+	width: 100%;
+	overflow:hidden;
+	border:1px dotted #ddd;
+}
+
+input[type=file] {
+	width: 50%;height: 300px;
+	margin-top:-240px;
+}

views/index.jade

@@ -5,8 +5,10 @@ html
 		link(rel='stylesheet', href='/stylesheets/style.css')
 	body
 		div(id='container')
-			p(id='message')
-				| Drop files anywhere in here
+			div(id="dropContainer")
+				p(id='message')
+					| Drop files anywhere in here
+				input(type="file",multiple, webkitdirectory, id="dropFolders")
 			ul(id='itemlist')
 				- if(content.length)
 					- content.forEach(function(item){