feat: browser support blob (#409)

* feature: add support with blob

* fix: fix typo

* test: add test cases for blob's upload operation

* feat: rm unused test data (#401)

* fix: add invalidation for security

* test: update test case

* feat: add example about upload blob

* fix: restore test data

* fix: restore test data

example/index.html

@@ -62,7 +62,6 @@ <h1>OSS <small>in</small> Browser</h1>
  <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>
@@ -72,6 +71,26 @@ <h1>OSS <small>in</small> Browser</h1>
  </td>
  </tr>
  <tr>
+ <td>
+ <div class="panel panel-success">
+ <div class="panel-heading">Upload Blob</div>
+ <div class="panel-body">
+ <form action="" class="form-horizontal">
+ <div class="form-group">
+ <label>Content</label>
+ <textarea class="form-control" id="file-blob" rows="3">Hello, OSS! I am a Blob!</textarea>
+ </div>
+ <div class="form-group">
+ <label>Store as</label>
+ <input type="text" class="form-control" id="object-key-blob" value="blob" />
+ </div>
+ <div class="form-group">
+ <input type="button" class="btn btn-primary" id="blob-button" value="Save" />
+ </div>
+ </form>
+ </div>
+ </div>
+ </td>
  <td>
  <div class="panel panel-danger">
  <div class="panel-heading">Upload with base64 img</div>
@@ -104,7 +123,8 @@ <h1>OSS <small>in</small> Browser</h1>
  </div>
  </div>
  </td>
-
+ </tr>
+ <tr>
  <td>
  <div class="panel panel-warning">
  <div class="panel-heading">Download file</div>
@@ -125,8 +145,6 @@ <h1>OSS <small>in</small> Browser</h1>
  </div>
  </div>
  </td>
- </tr>
- <tr>
  <td>
  <div class="panel panel-info">
  <div class="panel-heading">List files</div>

example/index.js

@@ -174,6 +174,14 @@ const uploadContent = function (client) {
  return client.put(key, new Buffer(content)).then(res => listFiles(client));
 };
 
+const uploadBlob = function (client) {
+ const content = document.getElementById('file-blob').value.trim();
+ const key = document.getElementById('object-key-blob').value.trim() || 'blob';
+ console.log(`content => ${key}`);
+
+ return client.put(key, new Blob([content], { type: 'text/plain' })).then(res => listFiles(client));
+}
+
 
 const downloadFile = function (client) {
  const object = document.getElementById('dl-object-key').value.trim();
@@ -209,6 +217,10 @@ window.onload = function () {
  applyTokenDo(uploadContent);
  };
 
+ document.getElementById('blob-button').onclick = function () {
+ applyTokenDo(uploadBlob);
+ };
+
  document.getElementById('list-files-button').onclick = function () {
  applyTokenDo(listFiles);
  };

lib/browser/managed_upload.js

@@ -36,8 +36,17 @@ proto.multipartUpload = function* multipartUpload(name, file, options) {
  }
 
  const minPartSize = 100 * 1024;
- const filename = is.file(file) ? file.name : file;
- options.mime = options.mime || mime.getType(path.extname(filename));
+
+ if (!options.mime) {
+ if (is.file(file)) {
+ options.mime = mime.getType(path.extname(file.name));
+ } else if (is.blob(file)) {
+ options.mime = file.type;
+ } else {
+ options.mime = mime.getType(path.extname(file));
+ }
+ }
+
  options.headers = options.headers || {};
  this._convertMetaToHeaders(options.meta, options.headers);
 
@@ -182,13 +191,17 @@ is.file = function file(obj) {
  return typeof (File) !== 'undefined' && obj instanceof File;
 };
 
+is.blob = function (blob) {
+ return typeof (Blob) !== 'undefined' && blob instanceof Blob;
+};
+
 /**
  * Get file size
  */
 proto._getFileSize = function* _getFileSize(file) {
  if (is.buffer(file)) {
  return file.length;
- } else if (is.file(file)) {
+ } else if (is.blob(file) || is.file(file)) {
  return file.size;
  } if (is.string(file)) {
  const stat = yield this._statFile(file);
@@ -261,7 +274,7 @@ WebFileReadStream.prototype._read = function _read(size) {
 };
 
 proto._createStream = function _createStream(file, start, end) {
- if (is.file(file)) {
+ if (is.blob(file) || is.file(file)) {
  return new WebFileReadStream(file.slice(start, end));
  }
  // else if (is.string(file)) {

lib/browser/object.js

@@ -65,15 +65,20 @@ proto.put = function* put(name, file, options) {
  options = options || {};
  if (is.buffer(file)) {
  content = file;
- } else if (is.string(file)) {
- options.mime = options.mime || mime.getType(path.extname(file));
- const stream = fs.createReadStream(file);
+ } else if (is.blob(file) || is.file(file)) {
+ if (!options.mime) {
+ if (is.file(file)) {
+ options.mime = mime.getType(path.extname(file.name));
+ } else {
+ options.mime = file.type;
+ }
+ }
+
+ const stream = this._createStream(file, 0, file.size);
  options.contentLength = yield this._getFileSize(file);
  return yield this.putStream(name, stream, options);
- } else if (is.readableStream(file)) {
- return yield this.putStream(name, file, options);
  } else {
- throw new TypeError('Must provide String/Buffer/ReadableStream for put.');
+ throw new TypeError('Must provide Buffer/Blob for put.');
  }
 
  options.headers = options.headers || {};

test/browser/browser.test.js

@@ -471,6 +471,28 @@ describe('browser', () => {
 
  assert.equal(resultGet.content.toString(), body.toString());
 
+ const resultDel = yield this.store.delete(name);
+ assert.equal(resultDel.res.status, 204);
+ });
+ it('GETs and PUTs blob to a bucket', function* () {
+ const name = `${prefix}put/test`;
+ const body = new Blob(['blobBody'], { type: 'text/plain' });
+ const resultPut = yield this.store.put(name, body);
+ assert.equal(resultPut.res.status, 200);
+ const resultGet = yield this.store.get(name);
+ assert.equal(resultGet.res.status, 200);
+
+
+ yield new Promise((resolve) => {
+ const fr = new FileReader();
+ fr.onload = function () {
+ console.log(fr.result);
+ assert.equal(resultGet.content.toString(), fr.result);
+ resolve();
+ };
+ fr.readAsText(body, 'utf-8');
+ });
+
  const resultDel = yield this.store.delete(name);
  assert.equal(resultDel.res.status, 204);
  });
@@ -762,6 +784,39 @@ describe('browser', () => {
  assert.deepEqual(md5(object.content), md5(fileBuf));
  });
 
+ it('should upload file using multipart upload', function* () {
+ // create a file with 1M random data
+ const blobContent = Array(1024 * 1024).fill('a').join('');
+ const blob = new Blob([blobContent], { type: 'text/plain' });
+
+ const name = `${prefix}multipart/upload-blob.js`;
+ let progress = 0;
+ const result = yield this.store.multipartUpload(name, blob, {
+ partSize: 100 * 1024,
+ progress() {
+ return function (done) {
+ progress++;
+ done();
+ };
+ },
+ });
+ sinon.restore();
+ assert.equal(result.res.status, 200);
+ assert.equal(progress, 12);
+
+ const object = yield this.store.get(name);
+ assert.equal(object.res.status, 200);
+
+ const blobBuf = new Uint8Array(blobContent.length);
+ for (let i = 0, j = blobContent.length; i < j; ++i) {
+ blobBuf[i] = blobContent.charCodeAt(i);
+ }
+
+ assert.equal(object.content.length, blobBuf.length);
+ // avoid comparing buffers directly for it may hang when generating diffs
+ assert.deepEqual(md5(object.content), md5(blobBuf));
+ });
+
  it('should return requestId in init, upload part, complete', function* () {
  const fileContent = Array(1024 * 1024).fill('a').join('');
  const file = new File([fileContent], 'multipart-fallback');