Skip to content

Commit

Permalink
Fixed #68 #70 #65 #62 #64 #58
Browse files Browse the repository at this point in the history
  • Loading branch information
danialfarid committed Dec 4, 2013
1 parent b0c1412 commit e26bdaf
Show file tree
Hide file tree
Showing 15 changed files with 162 additions and 94 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "angularjs-file-upload",
"main": "angular-file-upload.min.js",
"version": "1.1.9",
"version": "1.1.10",
"homepage": "https://github.com/danialfarid/angular-file-upload",
"authors": [
"danialf <[email protected]>"
Expand Down
13 changes: 12 additions & 1 deletion demo/war/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,5 +97,16 @@ html[data-useragent*='MSIE 10.0'] input[type="file"] {
button {
padding: 1px 5px;
font-size: smaller;
margin: 0;
margin: 0 3px;
}

.ng-v {
float: right;
}

.sel-file img {
float: left;
width: 18px;
height: 18px;
padding-right: 10px;
}
111 changes: 77 additions & 34 deletions demo/war/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,26 @@
<link type="text/css" rel="stylesheet" href="common.css">
<title>Angular file upload sample</title>
<script src="js/angular-file-upload-shim.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.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.0') + '/angular.js"><\/script>');
</script>
<script src="js/angular-file-upload.js"></script>
<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.js"></script> -->
</head>

<body>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div class="ng-v">
Angular Version: <input type="text" ng-model="angularVersion">
<input type="button" data-ng-click="changeAngularVersion()" value="Go">
</div>
<h1>Angular file upload Demo</h1>
<h3>
Visit <a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a> on github
</h3>

<div ng-app="fileUpload" ng-controller="MyCtrl">
<div>
Model object to be sent to the server with the file: <input type="text" ng-model="myModel"> <br />
choose a single file: <input type="file" ng-file-select="onFileSelect($files)">
<br/>
Expand All @@ -26,15 +34,20 @@ <h3>
<div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true">or drop files here</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
<br/>
<br/>
Progress:
<br/>
<br/>
<div ng-show="selectedFiles != null">
<div class="sel-file" ng-repeat="f in selectedFiles">
<span class="progress">
<img ng-show="dataUrls[$index]" 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">
<div style="width:{{progress[$index]}}%">{{progress[$index]}}%</div>
</span>
<button class="button" ng-click="upload[$index].abort(); upload[$index]=null"
ng-show="upload[$index] && progress[$index] < 100">Abort</button>
<button class="button" ng-click="abort($index)" ng-show="hasUploader($index) && progress[$index] < 100">Abort</button>
{{f.name}} - size: {{f.size}}B - type: {{f.type}}
</div>
</div>
Expand All @@ -58,8 +71,20 @@ <h3>
<script type="text/javascript">
angular.module('fileUpload', [ 'angularFileUpload' ]);

var MyCtrl = [ '$scope', '$http', '$timeout', '$upload', function($scope, $http, $timeout, $upload) {

var MyCtrl = [ '$scope', '$http', '$timeout', '$upload', function($scope, $http, $timeout, $upload) {
$scope.uploadRightAway = true;
$scope.changeAngularVersion = function() {
window.location.hash = $scope.angularVersion;
window.location.reload(true);
}
$scope.hasUploader = function(index) {
return $scope.upload[index] != null;
};
$scope.abort = function(index) {
$scope.upload[index].abort();
$scope.upload[index] = null;
};
$scope.angularVersion = window.location.hash.length > 1 ? window.location.hash.substring(1) : '1.2.0';
$scope.onFileSelect = function($files) {
$scope.selectedFiles = [];
$scope.progress = [];
Expand All @@ -73,35 +98,53 @@ <h3>
$scope.upload = [];
$scope.uploadResult = [];
$scope.selectedFiles = $files;
$scope.dataUrls = [];
for ( var i = 0; i < $files.length; i++) {
var $file = $files[i];
$scope.progress[i] = 0;
(function(index) {
$scope.upload[index] = $upload.upload({
url : 'upload',
headers: {'myHeaderKey': 'myHeaderVal'},
data : {
myModel : $scope.myModel
},
/* formDataAppender: function(fd, key, val) {
if (angular.isArray(val)) {
angular.forEach(val, function(v) {
fd.append(key, v);
});
} else {
fd.append(key, val);
}
}, */
file : $file,
fileFormDataName: 'myFile'
}).then(function(response) {
$scope.uploadResult.push(response.data.result);
}, null, function(evt) {
$scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
});
})(i);
if (window.FileReader && $file.type.indexOf('image') > -1) {
var fileReader = new FileReader();
fileReader.readAsDataURL($files[i]);
function setPreview(fileReader, index) {
fileReader.onload = function(e) {
$timeout(function() {
$scope.dataUrls[index] = e.target.result;
});
}
}
setPreview(fileReader, i);
}
$scope.progress[i] = -1;
if ($scope.uploadRightAway) {
$scope.start(i);
}
}
}

$scope.start = function(index) {
$scope.progress[index] = 0;
$scope.upload[index] = $upload.upload({
url : 'upload',
headers: {'myHeaderKey': 'myHeaderVal'},
data : {
myModel : $scope.myModel
},
/* formDataAppender: function(fd, key, val) {
if (angular.isArray(val)) {
angular.forEach(val, function(v) {
fd.append(key, v);
});
} else {
fd.append(key, val);
}
}, */
file: [$scope.selectedFiles[index], $scope.selectedFiles[index + 1]],
//fileFormDataName: 'myFile'
}).then(function(response) {
$scope.uploadResult.push(response.data.result);
}, null, function(evt) {
$scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
});
}
} ];
</script>
</body>
Expand Down
Binary file modified demo/war/js/FileAPI.flash.swf
Binary file not shown.
2 changes: 1 addition & 1 deletion demo/war/js/angular-file-upload-html5-shim.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload shim for angular XHR HTML5 browsers
* @author Danial <[email protected]>
* @version 1.1.9
* @version 1.1.10
*/
if (window.XMLHttpRequest) {
if (window.FormData) {
Expand Down
15 changes: 13 additions & 2 deletions demo/war/js/angular-file-upload-shim.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload shim for HTML5 FormData
* @author Danial <[email protected]>
* @version 1.1.9
* @version 1.1.10
*/
(function() {

Expand Down Expand Up @@ -90,6 +90,7 @@ if (window.XMLHttpRequest) {
config.data[item.key] = item.val;
}
}

setTimeout(function() {
xhr.__fileApiXHR = FileAPI.upload(config);
}, 1);
Expand All @@ -104,6 +105,13 @@ if (window.XMLHttpRequest) {
}

if (!window.FormData) {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) hasFlash = true;
} catch(e) {
if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined) hasFlash = true;
}
var wrapFileApi = function(elem) {
if (!elem.__isWrapped && (elem.getAttribute('ng-file-select') != null || elem.getAttribute('data-ng-file-select') != null)) {
var wrap = document.createElement('div');
Expand All @@ -113,6 +121,9 @@ if (!window.FormData) {
parent.insertBefore(wrap, elem);
parent.removeChild(elem);
wrap.appendChild(elem);
if (!hasFlash) {
wrap.appendChild(document.createTextNode('Flash is required'));
}
elem.__isWrapped = true;
}
};
Expand Down Expand Up @@ -170,7 +181,7 @@ if (!window.FormData) {
__isShim: true
};
};

(function () {
//load FileAPI
if (!window.FileAPI || !FileAPI.upload) {
Expand Down
42 changes: 19 additions & 23 deletions demo/war/js/angular-file-upload.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/**!
* AngularJS file upload/drop directive with http post and progress
* @author Danial <[email protected]>
* @version 1.1.9
* @version 1.1.10
*/
(function() {

var angularFileUpload = angular.module('angularFileUpload', []);

angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $rootScope) {
angularFileUpload.service('$upload', ['$http', '$rootScope', '$timeout', function($http, $rootScope, $timeout) {
this.upload = function(config) {
config.method = config.method || 'POST';
config.headers = config.headers || {};
Expand Down Expand Up @@ -41,19 +41,17 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro
config.__XHR = xhr;
xhr.upload.addEventListener('progress', function(e) {
if (config.progress) {
config.progress(e);
if (!$rootScope.$$phase) {
$rootScope.$apply();
}
$timeout(function() {
config.progress(e);
});
}
}, false);
//fix for firefox not firing upload progress end
xhr.upload.addEventListener('load', function(e) {
if (e.lengthComputable) {
config.progress(e);
if (!$rootScope.$$phase) {
$rootScope.$apply();
}
$timeout(function() {
config.progress(e);
});
}
}, false);
};
Expand All @@ -69,7 +67,9 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro

promise.abort = function() {
if (config.__XHR) {
config.__XHR.abort();
$timeout(function() {
config.__XHR.abort();
});
}
return promise;
};
Expand All @@ -85,7 +85,7 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro
};
}]);

angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse, $http) {
angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
return function(scope, elem, attr) {
var fn = $parse(attr['ngFileSelect']);
elem.bind('change', function(evt) {
Expand All @@ -96,7 +96,7 @@ angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse
files.push(fileList.item(i));
}
}
scope.$apply(function() {
$timeout(function() {
fn(scope, {
$files : files,
$event : evt
Expand All @@ -109,22 +109,18 @@ angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse
};
} ]);

angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$http', function($parse, $http) {
angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
return function(scope, elem, attr) {
if ('draggable' in document.createElement('span')) {
var fn = $parse(attr['ngFileDropAvailable']);
if(!scope.$$phase) {
scope.$apply(function() {
fn(scope);
});
} else {
fn(scope)
}
$timeout(function() {
fn(scope);
});
}
};
} ]);

angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', function($parse, $http) {
angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
return function(scope, elem, attr) {
if ('draggable' in document.createElement('span')) {
var fn = $parse(attr['ngFileDrop']);
Expand All @@ -146,7 +142,7 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', function($parse,
files.push(fileList.item(i));
}
}
scope.$apply(function() {
$timeout(function() {
fn(scope, {
$files : files,
$event : evt
Expand Down
Binary file modified dist/FileAPI.flash.swf
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/angular-file-upload-html5-shim.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload shim for angular XHR HTML5 browsers
* @author Danial <[email protected]>
* @version 1.1.9
* @version 1.1.10
*/
if (window.XMLHttpRequest) {
if (window.FormData) {
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-file-upload-html5-shim.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e26bdaf

Please sign in to comment.