fixed CORS and some CSS issues

README.md

@@ -11,6 +11,7 @@ Lightweight Angular JS directive to upload files. Features:
 * Supports cancel/abort upload while in progress
 * Supports File drag and drop (HTML5 only)
 * Supports Directory drag and drop (webkit only)
+* Supports CORS
 * All non-HTML5 code is in a separate shim file and could be easily removed if you only supports HTML5. (It is needed for progress event though)
 * Flash FileAPI will be loaded on demand for non-HTML5 FormData browsers so no extra load for HTML5 browsers.
 * `$upload` method can be configured to be either `POST` or `PUT` for HTML5 browsers.
@@ -82,16 +83,15 @@ var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
 
 **Note**: `angular.file-upload-shim.js` must be loaded before `angular.js` and is only needed if you are supporting non-HTML5 FormData browsers or you need to support upload progress or cancel.
 
-**Upload multiple files**: Only for HTML5 FormData browsers (not IE8-9) if you pass an array of files to `file` option it will upload all of them together in one request. In this case the `fileFormDataName` could be an array of names or a single string. If you use a single string, you may want to append square brackets to the end (i.e. `file[]`), depending on how your server parses arguments.
-
+**Upload multiple files**: Only for HTML5 FormData browsers (not IE8-9) if you pass an array of files to `file` option it will upload all of them together in one request. In this case the `fileFormDataName` could be an array of names or a single string. For Rails or depending on your server append square brackets to the end (i.e. `file[]`).
 If you want a cross browser approach you need to iterate through files and upload them one by one like the code above. This is due to the limitation of Flash file upload.
 
-You can also use `$upload.http()` to send the file binary or any data to the server while being able to listen to progress event. See [#88](https://github.com/danialfarid/angular-file-upload/issues/88) for more details.
+**$upload.http()**: You can also use `$upload.http()` to send the file binary or any data to the server while being able to listen to progress event. See [#88](https://github.com/danialfarid/angular-file-upload/issues/88) for more details.
 This equivalent to angular $http() but allow you to listen to progress event for HTML5 browsers.
 
-If your server is Rails and Apache you may need to modify server configurations for the server to support upload progress. See [#207](https://github.com/danialfarid/angular-file-upload/issues/207)
+**Rails progress event**: If your server is Rails and Apache you may need to modify server configurations for the server to support upload progress. See [#207](https://github.com/danialfarid/angular-file-upload/issues/207)
 
-For file drag and drop, ng-file-drag-over-class can be a function that returns a class name based on the $event. See the demo for a sample. If the attribute is not specified by default the element will have "dragover" class on drag over which could be used to style the drop zone. 
+**ng-file-drag-over-class**: For file drag and drop, ng-file-drag-over-class can be a function that returns a class name based on the $event. See the demo for a sample. If the attribute is not specified by default the element will have "dragover" class on drag over which could be used to style the drop zone. 
 
 ## Old browsers
 
@@ -112,15 +112,23 @@ You can put these two files beside `angular-file-upload-shim(.min).js` on your s
         //only one of staticPath or flashUrl.
         staticPath: '/flash/FileAPI.flash.swf/folder/'
         flashUrl: 'yourcdn.com/js/FileAPI.flash.swf'
+
+        //to debug flash in HTML5 browsers
+        //forceLoad: true, html5: false
     }
 </script>
 <script src="angular-file-upload-shim.min.js"></script>...
 ```
-**Note**: Because of the Flash limitation/bug there need to be a response body coming back from the server in order for the success and error callbacks to work properly. See [163#issuecomment](https://github.com/danialfarid/angular-file-upload/issues/163#issuecomment-39839508)
+**Known issues**: 
+*Because of the Flash limitation/bug there need to be a response body coming back from the server in order for the success and error callbacks to work properly. See [163#issuecomment](https://github.com/danialfarid/angular-file-upload/issues/163#issuecomment-39839508)
+*Custom headers will not work due to Flash limitation [#111](https://github.com/danialfarid/angular-file-upload/issues/111) [#224](https://github.com/danialfarid/angular-file-upload/issues/224) [#129](https://github.com/danialfarid/angular-file-upload/issues/129)
 
 ##Amazon S3 Upload
 [nukulb](https://github.com/nukulb) has provided an example here https://github.com/hubba/s3-angular-file-upload
 
+##Node.js
+Sample wiki page provided by [chovy](https://github.com/chovy)
+
 ## Install
 
 Download latest release from [here](https://github.com/danialfarid/angular-file-upload-bower/releases) or 

demo/src/com/df/angularfileupload/CORSFilter.java

@@ -0,0 +1,38 @@
+package com.df.angularfileupload;
+
+import java.io.IOException;
+
+import javax.servlet.Filter;
+import javax.servlet.FilterChain;
+import javax.servlet.FilterConfig;
+import javax.servlet.ServletException;
+import javax.servlet.ServletRequest;
+import javax.servlet.ServletResponse;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+public class CORSFilter implements Filter {
+
+	@Override
+	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException,
+			ServletException {
+		HttpServletResponse httpResp = (HttpServletResponse) resp;
+		HttpServletRequest httpReq = (HttpServletRequest) req;
+
+		httpResp.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTION");
+		httpResp.setHeader("Access-Control-Allow-Origin", "*");
+		if (httpReq.getMethod().equalsIgnoreCase("OPTIONS")) {
+			httpResp.setHeader("Access-Control-Allow-Headers",
+					((HttpServletRequest) req).getHeader("Access-Control-Request-Headers"));
+		}
+		chain.doFilter(req, resp);
+	}
+
+	@Override
+	public void init(FilterConfig arg0) throws ServletException {
+	}
+
+	@Override
+	public void destroy() {
+	}
+}

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-5-0</version>
+  <version>1-6-0</version>
 
   <!--
     Allows App Engine to send multiple requests to one instance in parallel:
@@ -27,5 +27,8 @@
     stale session data. For details, see
     http://code.google.com/appengine/docs/java/config/appconfig.html#Enabling_Sessions
   -->
+  <static-files>
+  	<exclude path="/*.html" />
+  </static-files>
 
 </appengine-web-app>

demo/war/WEB-INF/web.xml

@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8" standalone="no"?><web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5"
+	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 	<servlet>
 		<servlet-name>file_upload</servlet-name>
 		<servlet-class>com.df.angularfileupload.FileUpload</servlet-class>
@@ -10,16 +13,24 @@
 	<welcome-file-list>
 		<welcome-file>index.html</welcome-file>
 	</welcome-file-list>
- <servlet>
-  <servlet-name>SystemServiceServlet</servlet-name>
-  <servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
-  <init-param>
-   <param-name>services</param-name>
-   <param-value/>
-  </init-param>
- </servlet>
- <servlet-mapping>
-  <servlet-name>SystemServiceServlet</servlet-name>
-  <url-pattern>/_ah/spi/*</url-pattern>
- </servlet-mapping>
+	<servlet>
+		<servlet-name>SystemServiceServlet</servlet-name>
+		<servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
+		<init-param>
+			<param-name>services</param-name>
+			<param-value />
+		</init-param>
+	</servlet>
+	<servlet-mapping>
+		<servlet-name>SystemServiceServlet</servlet-name>
+		<url-pattern>/_ah/spi/*</url-pattern>
+	</servlet-mapping>
+	<filter>
+		<filter-name>cors_filter</filter-name>
+		<filter-class>com.df.angularfileupload.CORSFilter</filter-class>
+	</filter>
+	<filter-mapping>
+		<filter-name>cors_filter</filter-name>
+		<url-pattern>*</url-pattern>
+	</filter-mapping>
 </web-app>

demo/war/common.css

@@ -2,16 +2,28 @@ body {
 	font-family: Helvetica, arial, freesans, clean, sans-serif;	
 }
 
-input[type="file"] {	
+.upload-buttons input[type="file"] {	
 	width: 6.3em \0/IE9;
 	height: 1.5em;
 	margin: 5px;
 }
 
-input[multiple] {
+.upload-buttons input[multiple] {
 	width: 6.2em \0/IE9;
 }
 
+.upload-button {
+	width: 160px;
+	Height: 30px;
+	display: inline-block;
+	line-height: 30px;
+	padding: 0 10px;
+	background: #CCC;
+	appearance: button;
+	-moz-appearance: button; /* Firefox */
+	-webkit-appearance: button; /* Safari and Chrome */
+}
+
 .sel-file {
 	padding: 1px 5px;
 	font-size: smaller;

demo/war/crossdomain.xml

@@ -1,4 +1,8 @@
 <?xml version="1.0" ?>
 <cross-domain-policy>
-<allow-access-from domain="cdn.jsdelivr.net" />
+	<site-control permitted-cross-domain-policies="all" />
+	<allow-access-from domain="*" secure="false" />
+	<allow-access-from domain="angular-file-upload-cors.appspot.com" />
+	<allow-access-from domain="angular-file-upload-cors-srv.appspot.com" />
+	<allow-http-request-headers-from domain="*" headers="*" secure="false" />
 </cross-domain-policy>

demo/war/index.html

@@ -4,15 +4,28 @@
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link type="text/css" rel="stylesheet" href="common.css">
 <title>Angular file upload sample</title>
+<script type="text/javascript">
+FileAPI = {
+	debug: true,
+	//forceLoad: true, html5: false //to debug flash in HTML5 browsers
+	//only one of jsPath or jsUrl.
+    //jsPath: '/js/FileAPI.min.js/folder/', 
+    //jsUrl: 'yourcdn.com/js/FileAPI.min.js',
+
+    //only one of staticPath or flashUrl.
+    //staticPath: '/flash/FileAPI.flash.swf/folder/'
+    //flashUrl: 'yourcdn.com/js/FileAPI.flash.swf'
+};
+</script>
 <script src="js/angular-file-upload-shim.js"></script>
 <script type="text/javascript">
 // load angularjs specific version
 var angularVersion = window.location.hash.substring(1);
-document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' + (angularVersion || '1.2.11') + '/angular.js"><\/script>');
+if (angularVersion.indexOf('/') == 0) angularVersion = angularVersion.substring(1); 
+document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' + (angularVersion || '1.2.20') + '/angular.js"><\/script>');
 </script>
 <script src="js/angular-file-upload.js"></script>
 <script src="js/upload.js"></script>
-<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.js"></script> -->
 </head>
 
 <body ng-app="fileUpload" ng-controller="MyCtrl">
@@ -25,19 +38,23 @@ <h3>
 		Visit <a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a> on github
 	</h3>
 	<div class="upload-div">
-		http method: <input type="radio" ng-model="httpMethod" ng-init="httpMethod = 'POST'" value="POST"/>post <input type="radio" ng-model="httpMethod" value='PUT'/>put<br/>
+		http method: <input type="radio" ng-model="httpMethod" ng-init="httpMethod = 'POST'" value="POST"/>post <input type="radio" ng-model="httpMethod" value='PUT' ng-disabled="usingFlash"/>put<br/>
 		<br/>
 		How to upload:<br/>
 		<label><input type="radio" name="howToSend" ng-model="howToSend" value="1" ng-init="howToSend = 1">Multupart/form-data upload using $upload.upload() service cross browser</label>
 		<br/>
-		<label><input type="radio" name="howToSend" ng-model="howToSend" value="2" ng-disabled="!dropSupported">File binary content with the file type as Content-Type header using $upload.http() service</label>
+		<label><input type="radio" name="howToSend" ng-model="howToSend" value="2" ng-disabled="!fileReaderSupported || usingFlash">File binary content with the file type as Content-Type header using $upload.http() service</label>
 		<div class="sub">The second option could be used to upload files to <a href="https://github.com/danialfarid/angular-file-upload/issues/88">CouchDB</a>, 
 			<a href="https://github.com/danialfarid/angular-file-upload/issues/87">imgur</a>, etc... for HTML5 FileReader browsers.<br/>
 		</div><br/>
 		myModel: <input type="text" ng-model="myModel"> model object to be sent with the file.<br/>
-		choose a single file: <input type="file" ng-file-select="onFileSelect($files)" onclick="this.value=null">
-		<br/>
-		or multiple files: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" ng-file-select="onFileSelect($files)" multiple onclick="this.value=null">
+		<div class="upload-buttons">
+			choose a single file: <input type="file" ng-file-select="onFileSelect($files)" onclick="this.value=null">
+			<br/>
+			or multiple files: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" ng-file-select="onFileSelect($files)" multiple onclick="this.value=null">
+			<br/>
+		</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>
 		<br/>
 		<br/>
 		<div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files)" ng-file-drop-available="dropSupported=true"
@@ -80,6 +97,6 @@ <h3>
 			</ul>
 		</div>
 	</div>
-	<div style="position:fixed;bottom:10px;right:10px;font-size:smaller;color:#777">Last update: 2014-07-07</div>
+	<div style="position:fixed;bottom:10px;right:10px;font-size:smaller;color:#777">Last update: 2014-07-20</div>
 </body>
 </html>