Xuanwo/client.html

## client.html
<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>

## client.js
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];
            }
        });
    }
});

## server.js
// +-------------------------------------------------------------------------
// | 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}`)
});
	<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>
	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];
	}
	});
	}
	});
	// +-------------------------------------------------------------------------
	// \| 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}`)
	});