Skip to content

Commit fa0a3a0

Browse files
guo-yuguo-yu
committed
Initial commit
0 parents  commit fa0a3a0

File tree

7 files changed

+303
-0
lines changed

7 files changed

+303
-0
lines changed

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_*
2+
node_modules
3+
*.sublime*
4+
psd
5+
thumb
6+
*.log
7+
bower_*

‎LICENSE

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Copyright (c)
2+

‎README.md

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
## upyun
2+
3+
a pure front-end upyun form upload see service, supports both native js and angular.js
4+
5+
### Installation
6+
````
7+
$ bower install upyun --save
8+
````
9+
10+
### Example
11+
Use as a angular module:
12+
```javascript
13+
var app = angular.module('myApp',['upyun']);
14+
15+
// bind from form
16+
// required params must be defined in the form
17+
app.controller('upload', function($scope, $upyun) {
18+
// config upyun instance the very first
19+
$upyun.set('bucket','mybucket');
20+
$upyun.set('form_api_secret', 'xxxxxxxxxxx');
21+
22+
// uploadForm is the form's name `form(name="uploadForm")`
23+
$upyun.upload('uploadForm', function(err, response){
24+
if (err) return console.error(err);
25+
console.log(response);
26+
});
27+
});
28+
29+
// custom bind file
30+
app.controller('uploadByFile', function($scope, $upyun) {
31+
$upyun.upload(fileInstance, function(err, response){
32+
if (err) return console.error(err);
33+
console.log(response);
34+
});
35+
});
36+
```
37+
38+
Use as `window.upyun`, make sure `window.md5` and `window.base64` exist.
39+
```javascript
40+
upyun('uploadForm', function(err, response){
41+
if (err) return console.error(err);
42+
console.log(response);
43+
});
44+
});
45+
```
46+
47+
### Development
48+
install all deps:
49+
```
50+
$ git clone https://github.com/turingou/upyun.git
51+
$ cd upyun
52+
$ bower install
53+
$ npm run dev
54+
```
55+
56+
### Contributing
57+
- Fork this repo
58+
- Clone your repo
59+
- Install dependencies
60+
- Checkout a feature branch
61+
- Feel free to add your features
62+
- Make sure your features are fully tested
63+
- Open a pull request, and enjoy <3
64+
65+
### MIT license
66+
Copyright (c) 2014 turing &lt;[email protected]&gt;
67+
68+
Permission is hereby granted, free of charge, to any person obtaining a copy
69+
of this software and associated documentation files (the &quot;Software&quot;), to deal
70+
in the Software without restriction, including without limitation the rights
71+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
72+
copies of the Software, and to permit persons to whom the Software is
73+
furnished to do so, subject to the following conditions:
74+
75+
The above copyright notice and this permission notice shall be included in
76+
all copies or substantial portions of the Software.
77+
78+
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
79+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
80+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
81+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
82+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
83+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
84+
THE SOFTWARE.
85+
86+
---
87+
![docor](https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/doctor.png)
88+
built upon love by [docor](https://github.com/turingou/docor.git) v0.1.3

‎bower.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "upyun",
3+
"version": "0.1.0",
4+
"authors": [
5+
"turing <[email protected]>"
6+
],
7+
"description": "a pure front-end upyun form upload see service, supports both native js and angular.js",
8+
"main": "src/upyun.js",
9+
"keywords": [
10+
"upyun",
11+
"angular.js",
12+
"angular",
13+
"upload"
14+
],
15+
"license": "MIT",
16+
"homepage": "https://github.com/turingou/upyun",
17+
"ignore": [
18+
"**/.*",
19+
"node_modules",
20+
"bower_components",
21+
"test",
22+
"tests",
23+
"package.json"
24+
],
25+
"dependencies": {
26+
"angular": "*",
27+
"angular-base64": "~2.0.2",
28+
"angular-md5": "~0.1.7"
29+
}
30+
}

‎examples/angular.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="app">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>upyun form uploader</title>
6+
<script src="../src/upyun.js"></script>
7+
<script src="../bower_components/angular/angular.min.js"></script>
8+
<script src="../bower_components/angular-base64/angular-base64.min.js"></script>
9+
<script src="../bower_components/angular-md5/angular-md5.min.js"></script>
10+
</head>
11+
<body>
12+
<div class="wrapper">
13+
<h2>Angular.js example:</h2>
14+
<form name="uploadForm" role="form" ng-controller="uploader">
15+
<input type="file" name="file">
16+
<button type="submit">upload now</button>
17+
</form>
18+
</div>
19+
<script>
20+
var app = angular.module('app', ['upyun']);
21+
app.controller('uploader', ['$upyun', function($upyun){
22+
console.log($upyun);
23+
$upyun.set('bucket','mybucket');
24+
$upyun.set('form_api_secret', 'xxxxxxxxxxx');
25+
// bind upload form
26+
$upyun.upload('uploadForm', function(err, response, image){
27+
console.log(image);
28+
console.log(response);
29+
});
30+
}])
31+
</script>
32+
</body>
33+
</html>

‎examples/native.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>upyun form uploader</title>
6+
<script src="../src/upyun.js"></script>
7+
</head>
8+
<body>
9+
<div class="wrapper">
10+
<h2>Native js example:</h2>
11+
<form name="uploadForm" role="form">
12+
<input type="file" name="file">
13+
<button type="submit">upload now</button>
14+
</form>
15+
</div>
16+
<script>
17+
console.log(upyun);
18+
upyun.set('bucket','mybucket');
19+
upyun.set('form_api_secret', 'xxxxxxxxxxx');
20+
// bind upload form
21+
upyun.upload('uploadForm', function(err, response, image){
22+
console.log(image);
23+
console.log(response);
24+
});
25+
</script>
26+
</body>
27+
</html>

‎src/upyun.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
(function(window, angular) {
2+
3+
'use strict';
4+
5+
// check outer deps
6+
if (!window.JSON) throw new Error('JSON required.');
7+
if (!window.FormData) throw new Error('FormData required.');
8+
if (!window.XMLHttpRequest) throw new Error('XMLHttpRequest required.');
9+
10+
var base64, md5;
11+
12+
// inject to window object
13+
if (!angular) {
14+
return angular.module('upyun', [
15+
'base64',
16+
'angular-md5'
17+
]).factory('$upyun', ['$base64', 'md5',
18+
function(base64, md5) {
19+
return new Upyun(base64, md5);
20+
}
21+
]);
22+
} else {
23+
// inject as a angular module
24+
window.upyun = new Upyun(window.base64, window.md5);
25+
return window.upyun;
26+
}
27+
28+
function Upyun(base64, md5) {
29+
if (!base64) throw new Error('base64 required.');
30+
if (!md5) throw new Error('base64 required.');
31+
base64 = base64;
32+
md5 = md5;
33+
this.events = {};
34+
this.form_api_secret = '';
35+
this.configs = {};
36+
this.configs.expiration = (new Date().getTime()) + 60;
37+
this.configs['save-key'] = '/{year}/{mon}/{day}/upload_{filename}{.suffix}';
38+
this.configs['allow-file-type'] = 'jpg,gif,png';
39+
}
40+
41+
Upyun.prototype.set = function(k, v) {
42+
if (k && v) {
43+
if (k === 'form_api_secret' || k === 'endpoint') {
44+
this[k] = v;
45+
} else {
46+
this.configs[k] = v;
47+
}
48+
}
49+
return this;
50+
};
51+
52+
Upyun.prototype.on = function(event, callback) {
53+
if (event && callback) {
54+
self.events[event] = callback;
55+
}
56+
return this;
57+
};
58+
59+
Upyun.prototype.upload = function(params, callback) {
60+
if (!callback || typeof(callback) !== 'function')
61+
throw new Error('callback function required.');
62+
63+
var self = this;
64+
var req = new XMLHttpRequest();
65+
var uploadByForm = typeof(params) === 'string';
66+
67+
// if upload by form name,
68+
// all params must be input's value.
69+
var data = uploadByForm ?
70+
new FormData(document.forms.namedItem(params)) :
71+
new FormData();
72+
73+
var policy = base64.encode(JSON.stringify(self.configs));
74+
var apiendpoint = self.endpoint || 'http://v0.api.upyun.com/' + self.configs.bucket;
75+
76+
// by default, if not upload files by form,
77+
// file object will be parse as `params`
78+
if (!uploadByForm) data.append('file', file);
79+
data.append('policy', policy);
80+
data.append('signature', md5.createHash(policy + '&' + self.form_api_secret));
81+
82+
// open request
83+
req.open('POST', apiendpoint, true);
84+
85+
// Error event
86+
req.addEventListener('error', function(err) {
87+
return callback(err);
88+
}, false);
89+
90+
// when server response
91+
req.addEventListener('load', function(result) {
92+
var statusCode = result.target.status;
93+
// trying to parse JSON
94+
if (statusCode !== 200)
95+
return callback(new Error(result.target.status), result.target);
96+
try {
97+
return callback(null, result.target, JSON.parse(this.responseText));
98+
} catch (err) {
99+
return callback(err);
100+
}
101+
}, false);
102+
103+
// the upload progress monitor
104+
req.upload.addEventListener('progress', function(pe) {
105+
if (!pe.lengthComputable) return;
106+
if (!self.events.uploading || typeof(self.events.uploading) !== 'function')
107+
return;
108+
self.events.uploading(Math.round(pe.loaded / pe.total * 100));
109+
});
110+
111+
// send data to server
112+
req.send(data);
113+
114+
}
115+
116+
})(window, window.angular);

0 commit comments

Comments
 (0)