Skip to content

Commit b372365

Browse files
ygj6ygj6
authored
Merge pull request #869 from ygj6/master
support timeout
2 parents edaae54 + dc92cb7 commit b372365

File tree

9 files changed

+282
-6
lines changed

9 files changed

+282
-6
lines changed

‎examples/issues/862/controllers.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
4+
angular
5+
6+
7+
.module('app', ['angularFileUpload'])
8+
9+
10+
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
11+
var uploader = $scope.uploader = new FileUploader({
12+
url: 'upload.php'
13+
//,timeout: 2000
14+
});
15+
16+
$scope.testUploader = function(){
17+
angular.element("#testUpload").click();
18+
}
19+
20+
uploader.onCompleteAll = function() {
21+
console.info('onCompleteAll');
22+
};
23+
24+
console.info('uploader', uploader);
25+
}]);

‎examples/issues/862/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
3+
4+
<head>
5+
<title>Simple example</title>
6+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
7+
8+
<!-- Fix for old browsers -->
9+
<script src="http://nervgh.github.io/js/es5-shim.min.js"></script>
10+
<script src="http://nervgh.github.io/js/es5-sham.min.js"></script>
11+
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
12+
<script src="../../console-sham.js"></script>
13+
14+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
15+
16+
<!--<script src="../bower_components/angular/angular.js"></script>-->
17+
<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
18+
<script src="../../../dist/angular-file-upload.min.js"></script>
19+
<script src="controllers.js"></script>
20+
21+
<style>
22+
.my-drop-zone { border: dotted 3px lightgray; }
23+
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
24+
.another-file-over-class { border: dotted 3px green; }
25+
26+
html, body { height: 100%; }
27+
.block {
28+
width: 200px;
29+
height: 200px;
30+
display: inline-block;
31+
}
32+
.white {
33+
background-color: white;
34+
}
35+
.main {
36+
background-color: aqua;
37+
}
38+
#testUpload {
39+
display: none;
40+
}
41+
</style>
42+
43+
</head>
44+
45+
<!-- 1. nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
46+
<body ng-controller="AppController" uploader="uploader" filters="queueLimit, customFilter">
47+
48+
<div class="container">
49+
50+
<div class="row">
51+
52+
<div class="col-md-3">
53+
54+
<h3>Select files</h3>
55+
56+
Single
57+
<input id="testUpload" type="file" nv-file-select="" uploader="uploader" /><br/>
58+
59+
<div nv-file-drop="" nv-file-over="" uploader="uploader" ng-click="testUploader();" class="block main">
60+
Alternative upload buttoon
61+
<div>File meta data:name,status</div>
62+
<b>{{ uploader.queue[uploader.queue.length-1].file.name }}</b>
63+
<div>Is also an drag-and-drop area</div>
64+
</div>
65+
66+
</div>
67+
68+
<div class="col-md-9" style="margin-bottom: 40px">
69+
70+
<h3>Upload queue</h3>
71+
<p>Queue length: {{ uploader.queue.length }}</p>
72+
73+
<table class="table">
74+
<thead>
75+
<tr>
76+
<th width="50%">Name</th>
77+
<th ng-show="uploader.isHTML5">Size</th>
78+
<th ng-show="uploader.isHTML5">Progress</th>
79+
<th>Status</th>
80+
<th>Actions</th>
81+
</tr>
82+
</thead>
83+
<tbody>
84+
<tr ng-repeat="item in uploader.queue">
85+
<td><strong>{{ item.file.name }}</strong></td>
86+
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
87+
<td ng-show="uploader.isHTML5">
88+
<div class="progress" style="margin-bottom: 0;">
89+
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
90+
</div>
91+
</td>
92+
<td class="text-center">
93+
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
94+
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
95+
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
96+
</td>
97+
<td nowrap>
98+
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
99+
<span class="glyphicon glyphicon-upload"></span> Upload
100+
</button>
101+
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
102+
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
103+
</button>
104+
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
105+
<span class="glyphicon glyphicon-trash"></span> Remove
106+
</button>
107+
</td>
108+
</tr>
109+
</tbody>
110+
</table>
111+
112+
<div>
113+
<div>
114+
Queue progress:
115+
<div class="progress" style="">
116+
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
117+
</div>
118+
</div>
119+
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
120+
<span class="glyphicon glyphicon-upload"></span> Upload all
121+
</button>
122+
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
123+
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
124+
</button>
125+
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
126+
<span class="glyphicon glyphicon-trash"></span> Remove all
127+
</button>
128+
</div>
129+
130+
</div>
131+
132+
</div>
133+
134+
</div>
135+
136+
</body>
137+
</html>

‎examples/issues/862/upload.php‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<?php
2+
3+
if ( !empty( $_FILES ) ) {
4+
5+
$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
6+
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'uploads' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];
7+
8+
move_uploaded_file( $tempPath, $uploadPath );
9+
10+
$answer = array( 'answer' => 'File transfer completed' );
11+
$json = json_encode( $answer );
12+
13+
echo $json;
14+
15+
} else {
16+
17+
echo 'No files';
18+
19+
}
20+
21+
?>

‎examples/simple/controllers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ angular
1010
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
1111
var uploader = $scope.uploader = new FileUploader({
1212
url: 'upload.php'
13+
//,timeout: 2000
1314
});
1415

1516
// FILTERS
@@ -64,6 +65,11 @@ angular
6465
uploader.onCompleteItem = function(fileItem, response, status, headers) {
6566
console.info('onCompleteItem', fileItem, response, status, headers);
6667
};
68+
69+
uploader.onTimeoutItem = function(fileItem) {
70+
console.info('onTimeoutItem', fileItem);
71+
};
72+
6773
uploader.onCompleteAll = function() {
6874
console.info('onCompleteAll');
6975
};

‎examples/simple/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@ <h3>Select files</h3>
7878
<input type="file" nv-file-select="" uploader="uploader" multiple /><br/>
7979

8080
Single
81-
<input type="file" nv-file-select="" uploader="uploader" />
81+
<input type="file" nv-file-select="" uploader="uploader" /><br/>
82+
83+
Set timeout 2s
84+
<input type="file" nv-file-select="" uploader="uploader" options="{ timeout: 2000 }"/>
8285
</div>
8386

8487
<div class="col-md-9" style="margin-bottom: 40px">

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
"gulp": "~3.9.1",
2424
"json-loader": "~0.5.4",
2525
"raw-loader": "~0.5.1",
26+
"serve": "^11.2.0",
2627
"webpack-stream": "~3.2.0"
28+
},
29+
"scripts": {
30+
"serve": "serve ."
2731
}
2832
}

‎src/services/FileItem.js‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default function __identity($compile, FileLikeObject) {
2424
* @constructor
2525
*/
2626
constructor(uploader, some, options) {
27-
var isInput = isElement(some);
28-
var input = isInput ? element(some) : null;
27+
var isInput = !!some.input;
28+
var input = isInput ? element(some.input) : null;
2929
var file = !isInput ? some : null;
3030

3131
extend(this, {
@@ -36,7 +36,8 @@ export default function __identity($compile, FileLikeObject) {
3636
removeAfterUpload: uploader.removeAfterUpload,
3737
withCredentials: uploader.withCredentials,
3838
disableMultipart: uploader.disableMultipart,
39-
method: uploader.method
39+
method: uploader.method,
40+
timeout: uploader.timeout
4041
}, options, {
4142
uploader: uploader,
4243
file: new FileLikeObject(some),
@@ -126,6 +127,11 @@ export default function __identity($compile, FileLikeObject) {
126127
*/
127128
onComplete(response, status, headers) {
128129
}
130+
/**
131+
* Callback
132+
*/
133+
onTimeout() {
134+
}
129135
/**********************
130136
* PRIVATE
131137
**********************/
@@ -216,6 +222,21 @@ export default function __identity($compile, FileLikeObject) {
216222
this.onComplete(response, status, headers);
217223
if(this.removeAfterUpload) this.remove();
218224
}
225+
/**
226+
* Inner callback
227+
* @private
228+
*/
229+
_onTimeout() {
230+
this.isReady = false;
231+
this.isUploading = false;
232+
this.isUploaded = false;
233+
this.isSuccess = false;
234+
this.isCancel = false;
235+
this.isError = true;
236+
this.progress = 0;
237+
this.index = null;
238+
this.onTimeout();
239+
}
219240
/**
220241
* Destroys a FileItem
221242
*/

‎src/services/FileLikeObject.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,19 @@ export default function __identity() {
2525
var fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
2626
var postfix = isString(fakePathOrObject) ? 'FakePath' : 'Object';
2727
var method = '_createFrom' + postfix;
28-
this[method](fakePathOrObject);
28+
this[method](fakePathOrObject, fileOrInput);
2929
}
3030
/**
3131
* Creates file like object from fake path string
3232
* @param {String} path
3333
* @private
3434
*/
35-
_createFromFakePath(path) {
35+
_createFromFakePath(path, input) {
3636
this.lastModifiedDate = null;
3737
this.size = null;
3838
this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase();
3939
this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
40+
this.input = input;
4041
}
4142
/**
4243
* Creates file like object from object
@@ -48,6 +49,7 @@ export default function __identity() {
4849
this.size = object.size;
4950
this.type = object.type;
5051
this.name = object.name;
52+
this.input = object.input;
5153
}
5254
}
5355
}

0 commit comments

Comments
 (0)