Browser Demo
// +-------------------------------------------------------------------------
// | Copyright (C) 2017 Yunify, Inc.
// +-------------------------------------------------------------------------
// | Licensed under the Apache License, Version 2.0 (the "License");
// | you may not use this work except in compliance with the License.
// | You may obtain a copy of the License in the LICENSE file, or at:
// |
// | http://www.apache.org/licenses/LICENSE-2.0
// |
// | Unless required by applicable law or agreed to in writing, software
// | distributed under the License is distributed on an "AS IS" BASIS,
// | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// | See the License for the specific language governing permissions and
// | limitations under the License.
// +-------------------------------------------------------------------------
import cors from 'cors';
import express from 'express';
import body from 'body-parser';
import {Config} from 'qingstor-sdk';
import {createHmac} from 'crypto';
const settings = {
access_key_id: 'access_key_id',
secret_access_key: 'secret_access_key',
log_level: "debug",
host: "127.0.0.1",
port: 9000
};
// Initialize server.
const server = express();
server.disable('x-powered-by');
server.disable('etag');
server.use(cors({
"origin": "http://127.0.0.1:3000",
"credentials": true
}));
server.use(body.urlencoded({extended: false}));
server.use(body.json());
// Setup config.
const config = new Config().loadConfig({
'access_key_id': settings.access_key_id,
'secret_access_key': settings.secret_access_key,
'log_level': settings.log_level,
});
// Setup handlers.
const router = express.Router();
router.post('/post-upload', (request, response) => {
let key = request.body['file'];
let policy = new Buffer(JSON.stringify({key})).toString('base64');
let h = createHmac('sha256', config.secret_access_key);
h.update(policy);
let signature = new Buffer(h.digest()).toString('base64');
let data = {
"access_key_id": config.access_key_id,
"key": key,
"policy": policy,
"signature": signature
};
response.json(data);
});
// Apply router.
server.use('/', router);
// Run server.
server.listen(settings.port, settings.host, () => {
console.log(`Demo server running at: ${settings.host}:${settings.port}`)
});
import request from 'request';
const signatureServer = "http://127.0.0.1:9000";
Template.uploader.events({
'change input[type="file"]' (event, template) {
let file = document.getElementsByName("file")[0].value.split("\\")[2];
const body = JSON.stringify({file}, null, 2);
request({
method: 'POST',
uri: `${signatureServer}/post-upload`,
headers: {'Content-Type': 'application/json'},
body,
}, (error, response) => {
// Apply signature.
const data = JSON.parse(response.body);
for (let i in data) {
document.getElementsByName(i)[0].value = data[i];
}
});
}
});
<head>
<title>Upload</title>
</head>
<body>
<div class="container">
<header class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/">Upload</a>
</div>
</header>
<div id="main">
{{> uploader}}
</div>
</div>
</body>
<template name="uploader">
<form id="upload" action="http://<bucket>.<zone>.qingstor.com" method="POST" enctype="multipart/form-data">
<span>Click or Drag a File Here to Upload</span>
<input type=hidden name="policy" value=""/>
<input type=hidden name="access_key_id" value=""/>
<input type=hidden name="signature" value=""/>
<input type=hidden name="key" value=""/>
<input type=file name="file"/>
<input type=submit name="Upload" value="Upload to QingStor"/>
</form>
</template>