Skip to content

Commit 2c3a2d3

Browse files
blueimpblueimp
committed
Refactored Angular module.
Renamed fileupload directive to fileUpload (file-upload in templates) for consistency with the service and controllers. Preview and Progress directives now use "file-upload-" as prefix as a sort of namespace. The formatFileSizeFilter now accepts suffix and prefix for the units. This allows better localizing for languages which put the unit label first.
1 parent 15734df commit 2c3a2d3

File tree

2 files changed

+39
-22
lines changed

2 files changed

+39
-22
lines changed

‎angularjs.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* jQuery File Upload Plugin AngularJS Demo 1.1.1
4+
* jQuery File Upload Plugin AngularJS Demo 1.2
55
* https://github.com/blueimp/jQuery-File-Upload
66
*
77
* Copyright 2013, Sebastian Tschan
@@ -74,7 +74,7 @@ <h2 class="lead">AngularJS version</h2>
7474
</blockquote>
7575
</div>
7676
<!-- The file upload form used as target for the file upload widget -->
77-
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-fileupload="options" ng-class="{true: 'fileupload-processing'}[!!processing() || loadingFiles]">
77+
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{true: 'fileupload-processing'}[!!processing() || loadingFiles]">
7878
<!-- Redirect browsers with JavaScript disabled to the origin page -->
7979
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
8080
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
@@ -100,30 +100,30 @@ <h2 class="lead">AngularJS version</h2>
100100
<!-- The global progress information -->
101101
<div class="span5 fade" data-ng-class="{true: 'in'}[!!active()]">
102102
<!-- The global progress bar -->
103-
<div class="progress progress-success progress-striped active" data-progress="progress()"><div class="bar" ng-style="{width: num + '%'}"></div></div>
103+
<div class="progress progress-success progress-striped active" data-file-upload-progress="progress()"><div class="bar" data-ng-style="{width: num + '%'}"></div></div>
104104
<!-- The extended global progress information -->
105105
<div class="progress-extended">&nbsp;</div>
106106
</div>
107107
</div>
108108
<!-- The table listing the files available for upload/download -->
109109
<table class="table table-striped files ng-cloak" data-toggle="modal-gallery" data-target="#modal-gallery">
110110
<tr data-ng-repeat="file in queue">
111-
<td data-ng-switch on="!!file.thumbnail_url">
111+
<td data-ng-switch data-on="!!file.thumbnail_url">
112112
<div class="preview" data-ng-switch-when="true">
113-
<a data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}"><img data-ng-src="{{file.thumbnail_url}}"></a>
113+
<a data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}"><img data-ng-src="{{file.thumbnail_url}}" alt=""></a>
114114
</div>
115-
<div class="preview" data-ng-switch-default data-preview="file"></div>
115+
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
116116
</td>
117117
<td>
118-
<p class="name" data-ng-switch on="!!file.url">
118+
<p class="name" data-ng-switch data-on="!!file.url">
119119
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" data-gallery="gallery" download="{{file.name}}">{{file.name}}</a>
120120
<span data-ng-switch-default>{{file.name}}</span>
121121
</p>
122-
<div ng-show="file.error"><span class="label label-important">Error</span> {{file.error}}</div>
122+
<div data-ng-show="file.error"><span class="label label-important">Error</span> {{file.error}}</div>
123123
</td>
124124
<td>
125125
<p class="size">{{file.size | formatFileSize}}</p>
126-
<div class="progress progress-success progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-progress="file.$progress()"><div class="bar" ng-style="{width: num + '%'}"></div></div>
126+
<div class="progress progress-success progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="bar" data-ng-style="{width: num + '%'}"></div></div>
127127
</td>
128128
<td>
129129
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit">

‎js/jquery.fileupload-angular.js

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* jQuery File Upload AngularJS Plugin 1.2.1
2+
* jQuery File Upload AngularJS Plugin 1.3
33
* https://github.com/blueimp/jQuery-File-Upload
44
*
55
* Copyright 2013, Sebastian Tschan
@@ -32,6 +32,9 @@
3232

3333
angular.module('blueimp.fileupload', [])
3434

35+
// The fileUpload service provides configuration options
36+
// for the fileUpload directive and default handlers for
37+
// File Upload events:
3538
.provider('fileUpload', function () {
3639
var scopeApply = function () {
3740
var scope = angular.element(this)
@@ -140,8 +143,9 @@
140143
];
141144
})
142145

146+
// Format byte numbers to readable presentations:
143147
.provider('formatFileSizeFilter', function () {
144-
var $config = this.defaults = {
148+
var $config = {
145149
// Byte units following the IEC format
146150
// http://en.wikipedia.org/wiki/Kilobyte
147151
units: [
@@ -150,23 +154,31 @@
150154
{size: 1000, suffix: ' KB'}
151155
]
152156
};
157+
this.defaults = $config;
153158
this.$get = function () {
154159
return function (bytes) {
155160
if (!angular.isNumber(bytes)) {
156161
return '';
157162
}
158163
var unit = true,
159-
i = -1;
164+
i = 0,
165+
prefix,
166+
suffix;
160167
while (unit) {
161-
unit = $config.units[i += 1];
168+
unit = $config.units[i];
169+
prefix = unit.prefix || '';
170+
suffix = unit.suffix || '';
162171
if (i === $config.units.length - 1 || bytes >= unit.size) {
163-
return (bytes / unit.size).toFixed(2) + unit.suffix;
172+
return prefix + (bytes / unit.size).toFixed(2) + suffix;
164173
}
174+
i += 1;
165175
}
166176
};
167177
};
168178
})
169179

180+
// The FileUploadController initializes the fileupload widget and
181+
// provides scope methods to control the File Upload functionality:
170182
.controller('FileUploadController', [
171183
'$scope', '$element', '$attrs', 'fileUpload',
172184
function ($scope, $element, $attrs, fileUpload) {
@@ -206,7 +218,8 @@
206218
length = files.length;
207219
}
208220
while (i) {
209-
if (queue[i -= 1] === file) {
221+
i -= 1;
222+
if (queue[i] === file) {
210223
return queue.splice(i, length);
211224
}
212225
}
@@ -293,7 +306,7 @@
293306
});
294307
// Observe option changes:
295308
$scope.$watch(
296-
$attrs.fileupload,
309+
$attrs.fileUpload,
297310
function (newOptions, oldOptions) {
298311
if (newOptions) {
299312
$element.fileupload('option', newOptions);
@@ -303,10 +316,11 @@
303316
}
304317
])
305318

319+
// Provide File Upload progress feedback:
306320
.controller('FileUploadProgressController', [
307321
'$scope', '$attrs', '$parse',
308322
function ($scope, $attrs, $parse) {
309-
var fn = $parse($attrs.progress),
323+
var fn = $parse($attrs.fileUploadProgress),
310324
update = function () {
311325
var progress = fn($scope);
312326
if (!progress || !progress.total) {
@@ -318,7 +332,7 @@
318332
};
319333
update();
320334
$scope.$watch(
321-
$attrs.progress + '.loaded',
335+
$attrs.fileUploadProgress + '.loaded',
322336
function (newValue, oldValue) {
323337
if (newValue !== oldValue) {
324338
update();
@@ -328,35 +342,38 @@
328342
}
329343
])
330344

345+
// Display File Upload previews:
331346
.controller('FileUploadPreviewController', [
332347
'$scope', '$element', '$attrs', '$parse',
333348
function ($scope, $element, $attrs, $parse) {
334-
var fn = $parse($attrs.preview),
349+
var fn = $parse($attrs.fileUploadPreview),
335350
file = fn($scope);
336351
if (file.preview) {
337352
$element.append(file.preview);
338353
}
339354
}
340355
])
341356

342-
.directive('fileupload', function () {
357+
.directive('fileUpload', function () {
343358
return {
344359
controller: 'FileUploadController'
345360
};
346361
})
347362

348-
.directive('progress', function () {
363+
.directive('fileUploadProgress', function () {
349364
return {
350365
controller: 'FileUploadProgressController'
351366
};
352367
})
353368

354-
.directive('preview', function () {
369+
.directive('fileUploadPreview', function () {
355370
return {
356371
controller: 'FileUploadPreviewController'
357372
};
358373
})
359374

375+
// Enhance the HTML5 download attribute to
376+
// allow drag&drop of files to the desktop:
360377
.directive('download', function () {
361378
return function (scope, elm, attrs) {
362379
elm.on('dragstart', function (e) {

0 commit comments

Comments
 (0)