Xuanwo
4/6/2017 - 4:40 PM

Browser Demo

Browser Demo

server.js
content_copyfile_download
// +-------------------------------------------------------------------------
// | 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}`)
});
client.js
content_copyfile_download
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];
            }
        });
    }
});
client.html
content_copyfile_download
<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>