Skip to content

Commit 9829556

Browse files
committed
Merge pull request #2 from flowjs/master
cf
2 parents b82f14e + 81ef017 commit 9829556

9 files changed

Lines changed: 255 additions & 143 deletions

File tree

README.md

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
## Flow.js [![Build Status](https://travis-ci.org/flowjs/flow.js.png)](https://travis-ci.org/flowjs/flow.js) [![Coverage Status](https://coveralls.io/repos/flowjs/flow.js/badge.png?branch=master)](https://coveralls.io/r/flowjs/flow.js?branch=master)
2-
1+
# Flow.js [![Build Status](https://travis-ci.org/flowjs/flow.js.png)](https://travis-ci.org/flowjs/flow.js) [![Coverage Status](https://coveralls.io/repos/flowjs/flow.js/badge.png?branch=master)](https://coveralls.io/r/flowjs/flow.js?branch=master)
32

43
Flow.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
54

@@ -9,7 +8,9 @@ Flow.js does not have any external dependencies other than the `HTML5 File API`.
98

109
Samples and examples are available in the `samples/` folder. Please push your own as Markdown to help document the project.
1110

12-
## Can i see a demo?
11+
## Whould you like to contribute? [View our development branch](https://github.com/flowjs/flow.js/tree/develop)
12+
13+
## Can I see a demo?
1314
[Flow.js + angular.js file upload demo](http://flowjs.github.io/ng-flow/) - ng-flow extension page https://github.com/flowjs/ng-flow
1415

1516
JQuery and node.js backend demo https://github.com/flowjs/flow.js/tree/master/samples/Node.js
@@ -20,41 +21,41 @@ Download a latest build from https://github.com/flowjs/flow.js/releases
2021
it contains development and minified production files in `dist/` folder.
2122

2223
or use bower:
23-
24-
bower install flow.js#~2
25-
24+
```console
25+
bower install flow.js#~2
26+
```
2627
or use git clone
27-
28-
git clone https://github.com/flowjs/flow.js
29-
28+
```console
29+
git clone https://github.com/flowjs/flow.js
30+
```
3031
## How can I use it?
3132

3233
A new `Flow` object is created with information of what and where to post:
33-
34-
var flow = new Flow({
35-
target:'/api/photo/redeem-upload-token',
36-
query:{upload_token:'my_token'}
37-
});
38-
// Flow.js isn't supported, fall back on a different method
39-
if(!flow.support) location.href = '/some-old-crappy-uploader';
40-
34+
```javascript
35+
var flow = new Flow({
36+
target:'/api/photo/redeem-upload-token',
37+
query:{upload_token:'my_token'}
38+
});
39+
// Flow.js isn't supported, fall back on a different method
40+
if(!flow.support) location.href = '/some-old-crappy-uploader';
41+
```
4142
To allow files to be either selected and drag-dropped, you'll assign drop target and a DOM item to be clicked for browsing:
42-
43-
flow.assignBrowse(document.getElementById('browseButton'));
44-
flow.assignDrop(document.getElementById('dropTarget'));
45-
43+
```javascript
44+
flow.assignBrowse(document.getElementById('browseButton'));
45+
flow.assignDrop(document.getElementById('dropTarget'));
46+
```
4647
After this, interaction with Flow.js is done by listening to events:
47-
48-
flow.on('fileAdded', function(file, event){
49-
console.log(file, event);
50-
});
51-
flow.on('fileSuccess', function(file,message){
52-
console.log(file,message);
53-
});
54-
flow.on('fileError', function(file, message){
55-
console.log(file, message);
56-
});
57-
48+
```javascript
49+
flow.on('fileAdded', function(file, event){
50+
console.log(file, event);
51+
});
52+
flow.on('fileSuccess', function(file,message){
53+
console.log(file,message);
54+
});
55+
flow.on('fileError', function(file, message){
56+
console.log(file, message);
57+
});
58+
```
5859
## How do I set it up with my server?
5960

6061
Most of the magic for Flow.js happens in the user's browser, but files still need to be reassembled from chunks on the server side. This should be a fairly simple task and can be achieved in any web framework or language, which is able to receive file uploads.
@@ -82,7 +83,8 @@ For every request, you can confirm reception in HTTP status codes (can be change
8283
Enabling the `testChunks` option will allow uploads to be resumed after browser restarts and even across browsers (in theory you could even run the same file upload across multiple tabs or different browsers). The `POST` data requests listed are required to use Flow.js to receive data, but you can extend support by implementing a corresponding `GET` request with the same parameters:
8384

8485
* If this request returns a `200` HTTP code, the chunks is assumed to have been completed.
85-
* If the request returns anything else, the chunk will be uploaded in the standard fashion.
86+
* If request returns a permanent error status, upload is stopped.
87+
* If request returns anything else, the chunk will be uploaded in the standard fashion.
8688

8789
After this is done and `testChunks` enabled, an upload can quickly catch up even after a browser restart by simply verifying already uploaded chunks that do not need to be uploaded again.
8890

@@ -92,9 +94,9 @@ After this is done and `testChunks` enabled, an upload can quickly catch up even
9294
#### Configuration
9395

9496
The object is loaded with a configuration options:
95-
96-
var r = new Flow({opt1:'val', ...});
97-
97+
```javascript
98+
var r = new Flow({opt1:'val', ...});
99+
```
98100
Available configuration options are:
99101

100102
* `target` The target URL for the multipart POST request. This can be a string or a function. If a
@@ -112,18 +114,23 @@ function, it will be passed a FlowFile, a FlowChunk and isTest boolean (Default:
112114
include cookies as part of the request, you need to set the `withCredentials` property to true.
113115
(Default: `false`)
114116
* `method` Method to use when POSTing chunks to the server (`multipart` or `octet`) (Default: `multipart`)
117+
* `testMethod` HTTP method to use when chunks are being tested. If set to a function, it will be passed a FlowFile and a FlowChunk arguments. (Default: `GET`)
118+
* `uploadMethod` HTTP method to use when chunks are being uploaded. If set to a function, it will be passed a FlowFile and a FlowChunk arguments. (Default: `GET`)
115119
* `prioritizeFirstAndLastChunk` Prioritize first and last chunks of all files. This can be handy if you can determine if a file is valid for your service from only the first or last chunk. For example, photo or video meta data is usually located in the first part of a file, making it easy to test support from only the first chunk. (Default: `false`)
116120
* `testChunks` Make a GET request to the server for each chunks to see if it already exists. If implemented on the server-side, this will allow for upload resumes even after a browser crash or even a computer restart. (Default: `true`)
117121
* `preprocess` Optional function to process each chunk before testing & sending. Function is passed the chunk as parameter, and should call the `preprocessFinished` method on the chunk when finished. (Default: `null`)
118122
* `generateUniqueIdentifier` Override the function that generates unique identifiers for each file. (Default: `null`)
119-
* `maxChunkRetries` The maximum number of retries for a chunk before the upload is failed. Valid values are any positive integer and `undefined` for no limit. (Default: `undefined`)
123+
* `maxChunkRetries` The maximum number of retries for a chunk before the upload is failed. Valid values are any positive integer and `undefined` for no limit. (Default: `0`)
120124
* `chunkRetryInterval` The number of milliseconds to wait before retrying a chunk on a non-permanent error. Valid values are any positive integer and `undefined` for immediate retry. (Default: `undefined`)
121125
* `progressCallbacksInterval` The time interval in milliseconds between progress reports. Set it
122126
to 0 to handle each progress callback. (Default: `500`)
123127
* `speedSmoothingFactor` Used for calculating average upload speed. Number from 1 to 0. Set to 1
124128
and average upload speed wil be equal to current upload speed. For longer file uploads it is
125129
better set this number to 0.02, because time remaining estimation will be more accurate. This
126130
parameter must be adjusted together with `progressCallbacksInterval` parameter. (Default 0.1)
131+
* `successStatuses` Response is success if response status is in this list (Default: `[200,201,
132+
202]`)
133+
* `permanentErrors` Response fails if response status is in this list (Default: `[404, 415, 500, 501]`)
127134

128135

129136
#### Properties
@@ -165,21 +172,24 @@ parameter must be adjusted together with `progressCallbacksInterval` parameter.
165172

166173
#### Events
167174

168-
* `.fileSuccess(file, message)` A specific file was completed. First argument `file` is instance of `FlowFile`, second argument `message` contains server response. Response is always a string.
169-
* `.fileProgress(file)` Uploading progressed for a specific file.
175+
* `.fileSuccess(file, message, chunk)` A specific file was completed. First argument `file` is instance of `FlowFile`, second argument `message` contains server response. Response is always a string.
176+
Third argument `chunk` is instance of `FlowChunk`. You can get response status by accessing xhr
177+
object `chunk.xhr.status`.
178+
* `.fileProgress(file, chunk)` Uploading progressed for a specific file.
170179
* `.fileAdded(file, event)` This event is used for file validation. To reject this file return false.
171180
This event is also called before file is added to upload queue,
172181
this means that calling `flow.upload()` function will not start current file upload.
173182
Optionally, you can use the browser `event` object from when the file was
174183
added.
175184
* `.filesAdded(array, event)` Same as fileAdded, but used for multiple file validation.
176185
* `.filesSubmitted(array, event)` Can be used to start upload of currently added files.
177-
* `.fileRetry(file)` Something went wrong during upload of a specific file, uploading is being retried.
178-
* `.fileError(file, message)` An error occurred during upload of a specific file.
186+
* `.fileRetry(file, chunk)` Something went wrong during upload of a specific file, uploading is being
187+
retried.
188+
* `.fileError(file, message, chunk)` An error occurred during upload of a specific file.
179189
* `.uploadStart()` Upload has been started on the Flow object.
180190
* `.complete()` Uploading completed.
181191
* `.progress()` Uploading progress.
182-
* `.error(message, file)` An error, including fileError, occurred.
192+
* `.error(message, file, chunk)` An error, including fileError, occurred.
183193
* `.catchAll(event, ...)` Listen to all the events listed above with the same callback function.
184194

185195
### FlowFile
@@ -224,28 +234,28 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
224234

225235
## Installation Dependencies
226236
1. To clone your Github repository, run:
227-
228-
git clone git@github.com:<github username>/flow.js.git
229-
237+
```console
238+
git clone git@github.com:<github username>/flow.js.git
239+
```
230240
2. To go to the Flow.js directory, run:
231-
232-
cd flow.js
233-
241+
```console
242+
cd flow.js
243+
```
234244
3. To add node.js dependencies
235-
236-
npm install
237-
245+
```console
246+
npm install
247+
```
238248
## Testing
239249

240250
Our unit and integration tests are written with Jasmine and executed with Karma. To run all of the
241251
tests on Chrome run:
242-
243-
grunt karma:watch
244-
252+
```console
253+
grunt karma:watch
254+
```
245255
Or choose other browser
246-
247-
grunt karma:watch --browsers=Firefox,Chrome
248-
256+
```console
257+
grunt karma:watch --browsers=Firefox,Chrome
258+
```
249259
Browsers should be comma separated and case sensitive.
250260

251261
To re-run tests just change any source or test file.

bower.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
{
22
"name": "flow.js",
3-
"version": "2.6.1",
3+
"version": "2.8.0",
44
"main": "./dist/flow.js",
55
"ignore": [
66
"**/.*",
77
"node_modules",
88
"bower_components",
99
"test",
1010
"tests",
11-
"samples"
11+
"samples",
12+
"CHANGELOG.md",
13+
"karma.conf.js",
14+
"package.json",
15+
"src/*",
16+
"Gruntfile.js"
1217
]
1318
}

0 commit comments

Comments
 (0)