support directory drop #175

demo/war/index.html

@@ -51,6 +51,7 @@ <h3>
 		<br/>
 		<div ng-show="selectedFiles != null">
 			<div class="sel-file" ng-repeat="f in selectedFiles">
+				{{($index + 1) + '.'}}
 				<img ng-show="dataUrls[$index]" ng-src="{{dataUrls[$index]}}">
 				<button class="button" ng-click="start($index)" ng-show="progress[$index] < 0">Start</button>
 				<span class="progress" ng-show="progress[$index] >= 0">						

demo/war/js/angular-file-upload.js

@@ -167,7 +167,7 @@ angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$timeout', funct
 } ]);
 
 angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', function($parse, $timeout) {
-	return function(scope, elem, attr) {
+	return function(scope, elem, attr) {		
 		if ('draggable' in document.createElement('span')) {
 			var cancel = null;
 			var fn = $parse(attr['ngFileDrop']);
@@ -182,22 +182,51 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', function($pars
 					elem.removeClass(attr['ngFileDragOverClass'] || "dragover");
 				});
 			}, false);
+
+			var processing = 0;
+			function traverseFileTree(files, item) {
+				if (item.isDirectory) {
+					var dirReader = item.createReader();
+					processing++;
+					dirReader.readEntries(function(entries) {
+						for (var i = 0; i < entries.length; i++) {
+							traverseFileTree(files, entries[i]);
+						}
+						processing--;
+					});
+				} else {
+					processing++;
+		    	    item.file(function(file) {
+		    	    	processing--;
+		    	    	files.push(file);
+		    	    });
+	    	  }
+			}
+
 			elem[0].addEventListener("drop", function(evt) {
 				evt.stopPropagation();
 				evt.preventDefault();
 				elem.removeClass(attr['ngFileDragOverClass'] || "dragover");
-				var files = [], fileList = evt.dataTransfer.files, i;
-				if (fileList != null) {
-					for (i = 0; i < fileList.length; i++) {
-						files.push(fileList.item(i));
+				var files = [], items = evt.dataTransfer.items;
+				for (var i = 0; i < items.length; i++) {
+					if (items[i].webkitGetAsEntry) {
+						traverseFileTree(files, items[i].webkitGetAsEntry());
+					} else {
+						files.push(items[i]);
 					}
 				}
-				$timeout(function() {
-					fn(scope, {
-						$files : files,
-						$event : evt
-					});
-				});
+				(function callback(delay) {
+					$timeout(function() {
+						if (!processing) {
+							fn(scope, {
+								$files : files,
+								$event : evt
+							});
+						} else {
+							callback(10);
+						}
+					}, delay || 0)
+				})();
 			}, false);
 		}
 	};

dist/angular-file-upload-html5-shim.js

@@ -1,7 +1,7 @@
 /**!
  * AngularJS file upload shim for angular XHR HTML5 browsers
  * @author  Danial  <danial.farid@gmail.com>
- * @version 1.2.11
+ * @version 1.3.0
  */
 if (window.XMLHttpRequest) {
 	if (window.FormData) {

dist/angular-file-upload-shim.js

@@ -1,7 +1,7 @@
 /**!
  * AngularJS file upload shim for HTML5 FormData
  * @author  Danial  <danial.farid@gmail.com>
- * @version 1.2.11
+ * @version 1.3.0
  */
 (function() {
 

dist/angular-file-upload.js

@@ -1,7 +1,7 @@
 /**!
  * AngularJS file upload/drop directive with http post and progress
  * @author  Danial  <danial.farid@gmail.com>
- * @version 1.2.11
+ * @version 1.3.0
  */
 (function() {
 
@@ -167,7 +167,7 @@ angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$timeout', funct
 } ]);
 
 angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', function($parse, $timeout) {
-	return function(scope, elem, attr) {
+	return function(scope, elem, attr) {		
 		if ('draggable' in document.createElement('span')) {
 			var cancel = null;
 			var fn = $parse(attr['ngFileDrop']);
@@ -182,22 +182,51 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', function($pars
 					elem.removeClass(attr['ngFileDragOverClass'] || "dragover");
 				});
 			}, false);
+
+			var processing = 0;
+			function traverseFileTree(files, item) {
+				if (item.isDirectory) {
+					var dirReader = item.createReader();
+					processing++;
+					dirReader.readEntries(function(entries) {
+						for (var i = 0; i < entries.length; i++) {
+							traverseFileTree(files, entries[i]);
+						}
+						processing--;
+					});
+				} else {
+					processing++;
+		    	    item.file(function(file) {
+		    	    	processing--;
+		    	    	files.push(file);
+		    	    });
+	    	  }
+			}
+
 			elem[0].addEventListener("drop", function(evt) {
 				evt.stopPropagation();
 				evt.preventDefault();
 				elem.removeClass(attr['ngFileDragOverClass'] || "dragover");
-				var files = [], fileList = evt.dataTransfer.files, i;
-				if (fileList != null) {
-					for (i = 0; i < fileList.length; i++) {
-						files.push(fileList.item(i));
+				var files = [], items = evt.dataTransfer.items;
+				for (var i = 0; i < items.length; i++) {
+					if (items[i].webkitGetAsEntry) {
+						traverseFileTree(files, items[i].webkitGetAsEntry());
+					} else {
+						files.push(items[i]);
 					}
 				}
-				$timeout(function() {
-					fn(scope, {
-						$files : files,
-						$event : evt
-					});
-				});
+				(function callback(delay) {
+					$timeout(function() {
+						if (!processing) {
+							fn(scope, {
+								$files : files,
+								$event : evt
+							});
+						} else {
+							callback(10);
+						}
+					}, delay || 0)
+				})();
 			}, false);
 		}
 	};

nuget/Package.nuspec

@@ -3,7 +3,7 @@
   <metadata>
     <id>angular-file-upload</id>
     <title>Angular file upload</title>
-    <version>1.2.11</version>
+    <version>1.3.0</version>
     <authors>Danial Farid, Georgios Diamantopoulos (nuget package)</authors>
     <owners>Danial Farid</owners>
     <licenseUrl>https://github.com/danialfarid/angular-file-upload/blob/master/LICENSE</licenseUrl>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-file-upload",
-  "version": "1.2.11",
+  "version": "1.3.0",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-uglify": "~0.2.7",