fixed #276 #277

danialfarid · Jul 27, 2014 · 5116122 · 5116122
1 parent 609cbfd
commit 5116122
Show file tree

Hide file tree

Showing 15 changed files with 49 additions and 128 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/demo/src/com/df/angularfileupload/CORSFilter.java b/demo/src/com/df/angularfileupload/CORSFilter.java
@@ -19,11 +19,11 @@ public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain
 		HttpServletResponse httpResp = (HttpServletResponse) resp;
 		HttpServletRequest httpReq = (HttpServletRequest) req;
 
-		httpResp.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTION");
+		httpResp.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS");
 		httpResp.setHeader("Access-Control-Allow-Origin", "*");
 		if (httpReq.getMethod().equalsIgnoreCase("OPTIONS")) {
 			httpResp.setHeader("Access-Control-Allow-Headers",
-					((HttpServletRequest) req).getHeader("Access-Control-Request-Headers"));
+					httpReq.getHeader("Access-Control-Request-Headers"));
 		}
 		chain.doFilter(req, resp);
 	}

diff --git a/demo/war/WEB-INF/appengine-web.xml b/demo/war/WEB-INF/appengine-web.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
-  <application>angular-file-upload</application>
-  <version>1-6-0</version>
+  <application>angular-file-upload-cors-srv</application>
+  <version>1-6-1</version>
 
   <!--
     Allows App Engine to send multiple requests to one instance in parallel:

diff --git a/demo/war/index.html b/demo/war/index.html
@@ -6,8 +6,9 @@
 <title>Angular file upload sample</title>
 <script type="text/javascript">
 FileAPI = {
-	//debug: true,
+	debug: true,
 	//forceLoad: true, html5: false //to debug flash in HTML5 browsers
+	//wrapInsideDiv: true, //experimental for fixing css issues
 	//only one of jsPath or jsUrl.
     //jsPath: '/js/FileAPI.min.js/folder/', 
     //jsUrl: 'yourcdn.com/js/FileAPI.min.js',
@@ -53,12 +54,14 @@ <h3>
 			<br/>
 			or multiple files: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" ng-file-select="onFileSelect($files)" multiple onclick="this.value=null">
 			<br/>
+			or only images: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" ng-file-select="onFileSelect($files)" multiple onclick="this.value=null" accept="image/*">
 		</div>
-		You can have any element as an upload button: <div ng-file-select="onFileSelect($files)" data-multiple="true" title="aaaa" onclick="this.value = null" class="upload-button">Click here to select file</div>
+		You can have any element as an upload button: <div ng-file-select="onFileSelect($files)" data-multiple="true" title="select file" onclick="this.value = null" class="upload-button">Click here to select file</div>
 		<br/>
 		<br/>
+		<!-- ng-file-drag-over-class and ng-file-drag-over-delay are optional for styling and css transition handling #277 -->
 		<div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files)" ng-file-drop-available="dropSupported=true"
-			ng-file-drag-over-class="dragOverClass($event)">or drop files <div>here</div></div>
+			ng-file-drag-over-class="dragOverClass($event)" ng-file-drag-over-delay="100">or drop files <div>here</div></div>
 		<div ng-show="!dropSupported">HTML5 Drop File is not supported on this browser</div>
 		<br/>
 		<input type="checkbox" ng-model="uploadRightAway">Upload right away

diff --git a/demo/war/js/angular-file-upload-shim.js b/demo/war/js/angular-file-upload-shim.js
@@ -161,14 +161,17 @@ if (!window.FormData || (window.FileAPI && FileAPI.forceLoad)) {
 		}
 		var el = angular.element(elem);
 		if (!el.hasClass('js-fileapi-wrapper') && (elem.getAttribute('ng-file-select') != null || elem.getAttribute('data-ng-file-select') != null)) {
-//			var wrap = document.createElement('div');
-//			wrap.innerHTML = '<div class="js-fileapi-wrapper" style="position:relative; overflow:hidden"></div>';
-//			wrap = wrap.firstChild;
-//			var parent = elem.parentNode;
-//			parent.insertBefore(wrap, elem);
-//			parent.removeChild(elem);
-//			wrap.appendChild(elem);
-			el.addClass('js-fileapi-wrapper');
+			if (FileAPI.wrapInsideDiv) {
+				var wrap = document.createElement('div');
+				wrap.innerHTML = '<div class="js-fileapi-wrapper" style="position:relative; overflow:hidden"></div>';
+				wrap = wrap.firstChild;
+				var parent = elem.parentNode;
+				parent.insertBefore(wrap, elem);
+				parent.removeChild(elem);
+				wrap.appendChild(elem);
+			} else {
+				el.addClass('js-fileapi-wrapper');
+			}
 		}
 	};
 	var changeFnWrapper = function(fn) {

diff --git a/demo/war/js/angular-file-upload.js b/demo/war/js/angular-file-upload.js
@@ -209,8 +209,8 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', '$location', f
 				evt.preventDefault();
 				$timeout.cancel(leaveTimeout);
 				if (!elem[0].__drag_over_class_) {
-					var dragOverClassFn = $parse(attr['ngFileDragOverClass']);
-					if (dragOverClassFn instanceof Function) {
+					if (attr['ngFileDragOverClass'].search(/\) *$/) > -1) {
+						dragOverClassFn = $parse(attr['ngFileDragOverClass']);
 						var dragOverClass = dragOverClassFn(scope, {
 							$event : evt
 						});					
@@ -229,7 +229,7 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$timeout', '$location', f
 				leaveTimeout = $timeout(function() {
 					elem.removeClass(elem[0].__drag_over_class_);
 					elem[0].__drag_over_class_ = null;
-				});
+				}, attr['ngFileDragOverDelay'] || 1);
 			}, false);
 			var fn = $parse(attr['ngFileDrop']);
 			elem[0].addEventListener("drop", function(evt) {

diff --git a/demo/war/js/upload.js b/demo/war/js/upload.js
@@ -3,7 +3,7 @@
 
 angular.module('fileUpload', [ 'angularFileUpload' ]);
 
-var uploadUrl = 'http://angular-file-upload-cors-srv.appspot.com/upload';
+//var uploadUrl = 'http://angular-file-upload-cors-srv.appspot.com/upload';
 window.uploadUrl = window.uploadUrl || 'upload';
 
 var MyCtrl = [ '$scope', '$http', '$timeout', '$upload', function($scope, $http, $timeout, $upload) {

diff --git a/dist/angular-file-upload-html5-shim.js b/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.6.1
+ * @version 1.6.2
  */
 if (window.XMLHttpRequest) {
 	if (window.FormData) {

diff --git a/dist/angular-file-upload-html5-shim.min.js b/dist/angular-file-upload-html5-shim.min.js
diff --git a/dist/angular-file-upload-shim.js b/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.6.1
+ * @version 1.6.2
  */
 (function() {
 
@@ -161,14 +161,17 @@ if (!window.FormData || (window.FileAPI && FileAPI.forceLoad)) {
 		}
 		var el = angular.element(elem);
 		if (!el.hasClass('js-fileapi-wrapper') && (elem.getAttribute('ng-file-select') != null || elem.getAttribute('data-ng-file-select') != null)) {
-//			var wrap = document.createElement('div');
-//			wrap.innerHTML = '<div class="js-fileapi-wrapper" style="position:relative; overflow:hidden"></div>';
-//			wrap = wrap.firstChild;
-//			var parent = elem.parentNode;
-//			parent.insertBefore(wrap, elem);
-//			parent.removeChild(elem);
-//			wrap.appendChild(elem);
-			el.addClass('js-fileapi-wrapper');
+			if (FileAPI.wrapInsideDiv) {
+				var wrap = document.createElement('div');
+				wrap.innerHTML = '<div class="js-fileapi-wrapper" style="position:relative; overflow:hidden"></div>';
+				wrap = wrap.firstChild;
+				var parent = elem.parentNode;
+				parent.insertBefore(wrap, elem);
+				parent.removeChild(elem);
+				wrap.appendChild(elem);
+			} else {
+				el.addClass('js-fileapi-wrapper');
+			}
 		}
 	};
 	var changeFnWrapper = function(fn) {