Skip to content

Commit e26bdaf

Browse files
danialfariddanialfarid
committed
1 parent b0c1412 commit e26bdaf

15 files changed

+162
-94
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angularjs-file-upload",
33
"main": "angular-file-upload.min.js",
4-
"version": "1.1.9",
4+
"version": "1.1.10",
55
"homepage": "https://github.com/danialfarid/angular-file-upload",
66
"authors": [
77
"danialf <danial.farid@gmail.com>"

‎demo/war/common.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,5 +97,16 @@ html[data-useragent*='MSIE 10.0'] input[type="file"] {
9797
button {
9898
padding: 1px 5px;
9999
font-size: smaller;
100-
margin: 0;
100+
margin: 0 3px;
101101
}
102+
103+
.ng-v {
104+
float: right;
105+
}
106+
107+
.sel-file img {
108+
float: left;
109+
width: 18px;
110+
height: 18px;
111+
padding-right: 10px;
112+
}

‎demo/war/index.html

Lines changed: 77 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,26 @@
55
<link type="text/css" rel="stylesheet" href="common.css">
66
<title>Angular file upload sample</title>
77
<script src="js/angular-file-upload-shim.js"></script>
8-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
9-
<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.js"></script> -->
8+
<script type="text/javascript">
9+
// load angularjs specific version
10+
var angularVersion = window.location.hash.substring(1);
11+
document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' + (angularVersion || '1.2.0') + '/angular.js"><\/script>');
12+
</script>
1013
<script src="js/angular-file-upload.js"></script>
14+
<!-- <script src="http://cdn.jsdelivr.net/angular.file-upload/1.0.0/angular-file-upload.min.js"></script> -->
1115
</head>
1216

13-
<body>
17+
<body ng-app="fileUpload" ng-controller="MyCtrl">
18+
<div class="ng-v">
19+
Angular Version: <input type="text" ng-model="angularVersion">
20+
<input type="button" data-ng-click="changeAngularVersion()" value="Go">
21+
</div>
1422
<h1>Angular file upload Demo</h1>
1523
<h3>
1624
Visit <a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a> on github
1725
</h3>
1826

19-
<div ng-app="fileUpload" ng-controller="MyCtrl">
27+
<div>
2028
Model object to be sent to the server with the file: <input type="text" ng-model="myModel"> <br />
2129
choose a single file: <input type="file" ng-file-select="onFileSelect($files)">
2230
<br/>
@@ -26,15 +34,20 @@ <h3>
2634
<div ng-show="dropSupported" class="drop-box" ng-file-drop="onFileSelect($files);" ng-file-drop-available="dropSupported=true">or drop files here</div>
2735
<div ng-show="!dropSupported">HTML5 Drop File is not supported on this browser</div>
2836
<br/>
37+
<input type="checkbox" ng-model="uploadRightAway">Upload right away
38+
<br/>
39+
<br/>
2940
Progress:
3041
<br/>
42+
<br/>
3143
<div ng-show="selectedFiles != null">
3244
<div class="sel-file" ng-repeat="f in selectedFiles">
33-
<span class="progress">
45+
<img ng-show="dataUrls[$index]" src="{{dataUrls[$index]}}">
46+
<button class="button" ng-click="start($index)" ng-show="progress[$index] < 0">Start</button>
47+
<span class="progress" ng-show="progress[$index] >= 0">
3448
<div style="width:{{progress[$index]}}%">{{progress[$index]}}%</div>
3549
</span>
36-
<button class="button" ng-click="upload[$index].abort(); upload[$index]=null"
37-
ng-show="upload[$index] && progress[$index] < 100">Abort</button>
50+
<button class="button" ng-click="abort($index)" ng-show="hasUploader($index) && progress[$index] < 100">Abort</button>
3851
{{f.name}} - size: {{f.size}}B - type: {{f.type}}
3952
</div>
4053
</div>
@@ -58,8 +71,20 @@ <h3>
5871
<script type="text/javascript">
5972
angular.module('fileUpload', [ 'angularFileUpload' ]);
6073

61-
var MyCtrl = [ '$scope', '$http', '$timeout', '$upload', function($scope, $http, $timeout, $upload) {
62-
74+
var MyCtrl = [ '$scope', '$http', '$timeout', '$upload', function($scope, $http, $timeout, $upload) {
75+
$scope.uploadRightAway = true;
76+
$scope.changeAngularVersion = function() {
77+
window.location.hash = $scope.angularVersion;
78+
window.location.reload(true);
79+
}
80+
$scope.hasUploader = function(index) {
81+
return $scope.upload[index] != null;
82+
};
83+
$scope.abort = function(index) {
84+
$scope.upload[index].abort();
85+
$scope.upload[index] = null;
86+
};
87+
$scope.angularVersion = window.location.hash.length > 1 ? window.location.hash.substring(1) : '1.2.0';
6388
$scope.onFileSelect = function($files) {
6489
$scope.selectedFiles = [];
6590
$scope.progress = [];
@@ -73,35 +98,53 @@ <h3>
7398
$scope.upload = [];
7499
$scope.uploadResult = [];
75100
$scope.selectedFiles = $files;
101+
$scope.dataUrls = [];
76102
for ( var i = 0; i < $files.length; i++) {
77103
var $file = $files[i];
78-
$scope.progress[i] = 0;
79-
(function(index) {
80-
$scope.upload[index] = $upload.upload({
81-
url : 'upload',
82-
headers: {'myHeaderKey': 'myHeaderVal'},
83-
data : {
84-
myModel : $scope.myModel
85-
},
86-
/* formDataAppender: function(fd, key, val) {
87-
if (angular.isArray(val)) {
88-
angular.forEach(val, function(v) {
89-
fd.append(key, v);
90-
});
91-
} else {
92-
fd.append(key, val);
93-
}
94-
}, */
95-
file : $file,
96-
fileFormDataName: 'myFile'
97-
}).then(function(response) {
98-
$scope.uploadResult.push(response.data.result);
99-
}, null, function(evt) {
100-
$scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
101-
});
102-
})(i);
104+
if (window.FileReader && $file.type.indexOf('image') > -1) {
105+
var fileReader = new FileReader();
106+
fileReader.readAsDataURL($files[i]);
107+
function setPreview(fileReader, index) {
108+
fileReader.onload = function(e) {
109+
$timeout(function() {
110+
$scope.dataUrls[index] = e.target.result;
111+
});
112+
}
113+
}
114+
setPreview(fileReader, i);
115+
}
116+
$scope.progress[i] = -1;
117+
if ($scope.uploadRightAway) {
118+
$scope.start(i);
119+
}
103120
}
104121
}
122+
123+
$scope.start = function(index) {
124+
$scope.progress[index] = 0;
125+
$scope.upload[index] = $upload.upload({
126+
url : 'upload',
127+
headers: {'myHeaderKey': 'myHeaderVal'},
128+
data : {
129+
myModel : $scope.myModel
130+
},
131+
/* formDataAppender: function(fd, key, val) {
132+
if (angular.isArray(val)) {
133+
angular.forEach(val, function(v) {
134+
fd.append(key, v);
135+
});
136+
} else {
137+
fd.append(key, val);
138+
}
139+
}, */
140+
file: [$scope.selectedFiles[index], $scope.selectedFiles[index + 1]],
141+
//fileFormDataName: 'myFile'
142+
}).then(function(response) {
143+
$scope.uploadResult.push(response.data.result);
144+
}, null, function(evt) {
145+
$scope.progress[index] = parseInt(100.0 * evt.loaded / evt.total);
146+
});
147+
}
105148
} ];
106149
</script>
107150
</body>

‎demo/war/js/FileAPI.flash.swf

3.5 KB
Binary file not shown.

‎demo/war/js/angular-file-upload-html5-shim.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**!
22
* AngularJS file upload shim for angular XHR HTML5 browsers
33
* @author Danial <danial.farid@gmail.com>
4-
* @version 1.1.9
4+
* @version 1.1.10
55
*/
66
if (window.XMLHttpRequest) {
77
if (window.FormData) {

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**!
22
* AngularJS file upload shim for HTML5 FormData
33
* @author Danial <danial.farid@gmail.com>
4-
* @version 1.1.9
4+
* @version 1.1.10
55
*/
66
(function() {
77

@@ -90,6 +90,7 @@ if (window.XMLHttpRequest) {
9090
config.data[item.key] = item.val;
9191
}
9292
}
93+
9394
setTimeout(function() {
9495
xhr.__fileApiXHR = FileAPI.upload(config);
9596
}, 1);
@@ -104,6 +105,13 @@ if (window.XMLHttpRequest) {
104105
}
105106

106107
if (!window.FormData) {
108+
var hasFlash = false;
109+
try {
110+
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
111+
if (fo) hasFlash = true;
112+
} catch(e) {
113+
if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined) hasFlash = true;
114+
}
107115
var wrapFileApi = function(elem) {
108116
if (!elem.__isWrapped && (elem.getAttribute('ng-file-select') != null || elem.getAttribute('data-ng-file-select') != null)) {
109117
var wrap = document.createElement('div');
@@ -113,6 +121,9 @@ if (!window.FormData) {
113121
parent.insertBefore(wrap, elem);
114122
parent.removeChild(elem);
115123
wrap.appendChild(elem);
124+
if (!hasFlash) {
125+
wrap.appendChild(document.createTextNode('Flash is required'));
126+
}
116127
elem.__isWrapped = true;
117128
}
118129
};
@@ -170,7 +181,7 @@ if (!window.FormData) {
170181
__isShim: true
171182
};
172183
};
173-
184+
174185
(function () {
175186
//load FileAPI
176187
if (!window.FileAPI || !FileAPI.upload) {

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

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/**!
22
* AngularJS file upload/drop directive with http post and progress
33
* @author Danial <danial.farid@gmail.com>
4-
* @version 1.1.9
4+
* @version 1.1.10
55
*/
66
(function() {
77

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

10-
angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $rootScope) {
10+
angularFileUpload.service('$upload', ['$http', '$rootScope', '$timeout', function($http, $rootScope, $timeout) {
1111
this.upload = function(config) {
1212
config.method = config.method || 'POST';
1313
config.headers = config.headers || {};
@@ -41,19 +41,17 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro
4141
config.__XHR = xhr;
4242
xhr.upload.addEventListener('progress', function(e) {
4343
if (config.progress) {
44-
config.progress(e);
45-
if (!$rootScope.$$phase) {
46-
$rootScope.$apply();
47-
}
44+
$timeout(function() {
45+
config.progress(e);
46+
});
4847
}
4948
}, false);
5049
//fix for firefox not firing upload progress end
5150
xhr.upload.addEventListener('load', function(e) {
5251
if (e.lengthComputable) {
53-
config.progress(e);
54-
if (!$rootScope.$$phase) {
55-
$rootScope.$apply();
56-
}
52+
$timeout(function() {
53+
config.progress(e);
54+
});
5755
}
5856
}, false);
5957
};
@@ -69,7 +67,9 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro
6967

7068
promise.abort = function() {
7169
if (config.__XHR) {
72-
config.__XHR.abort();
70+
$timeout(function() {
71+
config.__XHR.abort();
72+
});
7373
}
7474
return promise;
7575
};
@@ -85,7 +85,7 @@ angularFileUpload.service('$upload', ['$http', '$rootScope', function($http, $ro
8585
};
8686
}]);
8787

88-
angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse, $http) {
88+
angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
8989
return function(scope, elem, attr) {
9090
var fn = $parse(attr['ngFileSelect']);
9191
elem.bind('change', function(evt) {
@@ -96,7 +96,7 @@ angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse
9696
files.push(fileList.item(i));
9797
}
9898
}
99-
scope.$apply(function() {
99+
$timeout(function() {
100100
fn(scope, {
101101
$files : files,
102102
$event : evt
@@ -109,22 +109,18 @@ angularFileUpload.directive('ngFileSelect', [ '$parse', '$http', function($parse
109109
};
110110
} ]);
111111

112-
angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$http', function($parse, $http) {
112+
angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
113113
return function(scope, elem, attr) {
114114
if ('draggable' in document.createElement('span')) {
115115
var fn = $parse(attr['ngFileDropAvailable']);
116-
if(!scope.$$phase) {
117-
scope.$apply(function() {
118-
fn(scope);
119-
});
120-
} else {
121-
fn(scope)
122-
}
116+
$timeout(function() {
117+
fn(scope);
118+
});
123119
}
124120
};
125121
} ]);
126122

127-
angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', function($parse, $http) {
123+
angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', '$timeout', function($parse, $http, $timeout) {
128124
return function(scope, elem, attr) {
129125
if ('draggable' in document.createElement('span')) {
130126
var fn = $parse(attr['ngFileDrop']);
@@ -146,7 +142,7 @@ angularFileUpload.directive('ngFileDrop', [ '$parse', '$http', function($parse,
146142
files.push(fileList.item(i));
147143
}
148144
}
149-
scope.$apply(function() {
145+
$timeout(function() {
150146
fn(scope, {
151147
$files : files,
152148
$event : evt

‎dist/FileAPI.flash.swf

3.5 KB
Binary file not shown.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**!
22
* AngularJS file upload shim for angular XHR HTML5 browsers
33
* @author Danial <danial.farid@gmail.com>
4-
* @version 1.1.9
4+
* @version 1.1.10
55
*/
66
if (window.XMLHttpRequest) {
77
if (window.FormData) {

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)