forked from hanicker/angularjs-file-upload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
fileUpload.js
111 lines (99 loc) · 2.77 KB
/
fileUpload.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
directives.directive('fileUpload', [function() {
return {
restrict: 'EA',
replace: false,
scope: {
action: '@',
btnLabel: '@',
btnClass: '@',
inputName: '@',
progressClass: '@',
onSuccess: '&'
onError: '&'
},
link: function(scope, elem, attrs, ctrl) {
attrs.btnLabel = attrs.btnLabel || "Choose File";
attrs.inputName = attrs.inputName || "file";
attrs.btnClass = attrs.btnClass || "btn";
attrs.progressClass = attrs.progressClass || "btn";
elem.find('.fake-uploader').click(function() {
elem.find('input[type="file"]').click();
});
},
template: "<form \
style='margin: 0;' \
enctype='multipart/form-data'> \
method='POST' \
<div class='uploader'> \
<input \
type='file' \
name='{{ inputName }}' \
style='display: none;' \
onchange='angular.element(this).scope().sendFile(this);'/> \
<div class='btn-group'> \
<button \
class='{{ btnClass }} fake-uploader' \
type='button' \
readonly='readonly' \
ng-model='avatar'>{{ btnLabel }}</button> \
<button \
disabled \
class='{{ progressClass }}' \
ng-class='{ \"btn-primary\": progress < 100, \"btn-success\": progress == 100 }' \
ui-if=\"progress > 0\">{{ progress }}%</button>\
</div> \
</div> \
</form>",
controller: ['$scope', function ($scope) {
$scope.progress = 0;
$scope.avatar = '';
$scope.sendFile = function(el) {
var $form = $(el).parents('form');
if ($(el).val() == '') {
return false;
}
$form.attr('action', $scope.action);
$scope.$apply(function() {
$scope.progress = 0;
});
$form.ajaxSubmit({
type: 'POST',
dataType: 'json',
uploadProgress: function(event, position, total, percentComplete) {
$scope.$apply(function() {
// upload the progress bar during the upload
$scope.progress = percentComplete;
});
},
error: function(event, statusText, responseText, form) {
// remove the action attribute from the form
$form.removeAttr('action');
$scope.$apply(function () {
$scope.onError({
event: event,
responseText: responseText,
statusText: statusText,
form: form,
});
});
},
success: function(responseText, statusText, xhr, form) {
var ar = $(el).val().split('\\'),
filename = ar[ar.length-1];
// remove the action attribute from the form
$form.removeAttr('action');
$scope.$apply(function () {
$scope.onSuccess({
responseText: responseText,
statusText: statusText,
xhr: xhr,
form: form,
});
$scope.progress = 0;
});
},
});
}
}],
};
}]);