Repository: rockuw/oss-in-browser
Branch: master
Commit: 0111db6ad7a2
Files: 4
Total size: 9.3 KB

Directory structure:
gitextract_rzbxgiuq/

├── README.md
├── app.js
├── index.html
└── style.css

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# OSS in Browser

Play with OSS right in the browser!

![Demo](screenshot.png?raw=true "OSS in Browser")

## Browser support

- IE >= 10 & Edge
- Major versions of Chrome/Firefox/Safari
- Major versions of Android/iOS/WP

## Setup

### Bucket setup

As browser-side javascript involves CORS operations. You need to setup
your bucket CORS rules to allow CORS operations:

- set allowed origins to '*'
- allowed methods to 'PUT, GET, POST, DELETE, HEAD'
- set allowed headers to '*'
- expose 'ETag' in expose headers

### STS setup

As we don't want to expose the accessKeyId/accessKeySecret in the
browser, a [common practice][oss-sts] is to use STS to grant temporary
access.

### App setup

Fill in your appServer address and bucket name in `app.js`:

```js
var appServer = '<your STS app server>';
var bucket = '<your bucket name>';
var region = 'oss-cn-hangzhou';
```

And then open `index.html` in your browser.

### STS App server

A sample app server can be found [here][node-sts-app-server].

### IE Compatibility

You may need include the promise polyfill for IE:

```html
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
```


[node-sts-app-server]: https://github.com/rockuw/node-sts-app-server
[oss-sts]: https://help.aliyun.com/document_detail/oss/practice/ram_guide.html


================================================
FILE: app.js
================================================
'use strict';

var appServer = 'http://localhost:3000';
var bucket = '<bucket-name>';
var region = 'oss-cn-hangzhou';

var urllib = OSS.urllib;
var Buffer = OSS.Buffer;
var OSS = OSS.Wrapper;
var STS = OSS.STS;

// Play without STS. NOT SAFE! Because access key id/secret are
// exposed in web page.

// var client = new OSS({
//   region: 'oss-cn-hangzhou',
//   accessKeyId: '<access-key-id>',
//   accessKeySecret: '<access-key-secret>',
//   bucket: '<bucket-name>'
// });
//
// var applyTokenDo = function (func) {
//   return func(client);
// };

var applyTokenDo = function (func) {
  var url = appServer;
  return urllib.request(url, {
    method: 'GET'
  }).then(function (result) {
    var creds = JSON.parse(result.data);
    var client = new OSS({
      region: region,
      accessKeyId: creds.AccessKeyId,
      accessKeySecret: creds.AccessKeySecret,
      stsToken: creds.SecurityToken,
      bucket: bucket
    });

    return func(client);
  });
};

var progress = function (p) {
  return function (done) {
    var bar = document.getElementById('progress-bar');
    bar.style.width = Math.floor(p * 100) + '%';
    bar.innerHTML = Math.floor(p * 100) + '%';
    done();
  }
};

var uploadFile = function (client) {
  var file = document.getElementById('file').files[0];
  var key = document.getElementById('object-key-file').value.trim() || 'object';
  console.log(file.name + ' => ' + key);

  return client.multipartUpload(key, file, {
    progress: progress
  }).then(function (res) {
    console.log('upload success: %j', res);
    return listFiles(client);
  });
};

var uploadContent = function (client) {
  var content = document.getElementById('file-content').value.trim();
  var key = document.getElementById('object-key-content').value.trim() || 'object';
  console.log('content => ' + key);

  return client.put(key, new Buffer(content)).then(function (res) {
    return listFiles(client);
  });
};

var listFiles = function (client) {
  var table = document.getElementById('list-files-table');
  console.log('list files');

  return client.list({
    'max-keys': 100
  }).then(function (result) {
    var objects = result.objects.sort(function (a, b) {
      var ta = new Date(a.lastModified);
      var tb = new Date(b.lastModified);
      if (ta > tb) return -1;
      if (ta < tb) return 1;
      return 0;
    });

    var numRows = table.rows.length;
    for (var i = 1; i < numRows; i ++) {
      table.deleteRow(table.rows.length - 1);
    }

    for (var i = 0; i < Math.min(3, objects.length); i ++) {
      var row = table.insertRow(table.rows.length);
      row.insertCell(0).innerHTML = objects[i].name;
      row.insertCell(1).innerHTML = objects[i].size;
      row.insertCell(2).innerHTML = objects[i].lastModified;
    }
  });
};

var downloadFile = function (client) {
  var object = document.getElementById('dl-object-key').value.trim();
  var filename = document.getElementById('dl-file-name').value.trim();
  console.log(object + ' => ' + filename);

  var result = client.signatureUrl(object, {
    response: {
      'content-disposition': 'attachment; filename="' + filename + '"'
    }
  });
  window.location = result;

  return result;
};

window.onload = function () {
  document.getElementById('file-button').onclick = function () {
    applyTokenDo(uploadFile);
  }

  document.getElementById('content-button').onclick = function () {
    applyTokenDo(uploadContent);
  }

  document.getElementById('list-files-button').onclick = function () {
    applyTokenDo(listFiles);
  }

  document.getElementById('dl-button').onclick = function () {
    applyTokenDo(downloadFile);
  }

  applyTokenDo(listFiles);
};


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
<head>
  <title>OSS in Browser</title>
  <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
  <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <link rel="stylesheet" href="bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="main">
    <div class="page-header">
      <h1>OSS <small>in</small> Browser</h1>
    </div>
    <table>
      <tr>
        <td>
          <div class="panel panel-primary">
            <div class="panel-heading">Upload file</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Select file</label>
                  <input type="file" id="file" />
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-file" value="object" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
                </div>
              </form>
              <br />
              <div class="progress">
                <div id="progress-bar"
                     class="progress-bar"
                     role="progressbar"
                     aria-valuenow="0"
                     aria-valuemin="0"
                     aria-valuemax="100" style="min-width: 2em;">
                  0%
                </div>
              </div>
            </div>
          </div>
        </td>
        <td>
          <div class="panel panel-success">
            <div class="panel-heading">Upload content</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Content</label>
                  <textarea class="form-control" id="file-content" rows="3">Hello, OSS!</textarea>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-content" value="object" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="content-button" value="Save" />
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="panel panel-info">
            <div class="panel-heading">List files</div>
            <div class="panel-body">
              <table class="table table-striped" id="list-files-table">
                <tr>
                  <th>Key</th>
                  <th>Size</th>
                  <th>LastModified</th>
                </tr>
              </table>
              <input type="button" class="btn btn-primary" id="list-files-button" value="Refresh" />
            </div>
          </div>
        </td>
        <td>
          <div class="panel panel-warning">
            <div class="panel-heading">Download file</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Object key</label>
                  <input type="text" class="form-control" id="dl-object-key" value="object" />
                </div>
                <div class="form-group">
                  <label>Save as</label>
                  <input type="text" class="form-control" id="dl-file-name" value="filename" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="dl-button" value="Download" />
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          Powered by
          <a href="https://www.aliyun.com/product/oss">OSS</a> &
          <a href="https://github.com/ali-sdk/ali-oss">ali-oss</a></td>
      </tr>
    </table>
  </div>
</body>
</html>


================================================
FILE: style.css
================================================
body {
    text-align: center;
}

#main {
    text-align: left;
    width: 1000px;
    margin: 0 auto;
}

table tr td > div {
    width: 480px;
    height: 300px;
    margin: 10px;
}

table tr td > div > div.panel-body {
    margin-left: 5px;
    margin-right: 5px;
}