From 4c6aa19faeaff63194e74d5e3aaa6265d398c9a3 Mon Sep 17 00:00:00 2001 From: Xiaoning Liu Date: Thu, 6 Jul 2017 14:49:42 +0800 Subject: [PATCH] Added browseri specific APIs for uploading files and blobs Updated sample-blob.html and sample-file.html for new uploading APIs Added TypeScript definitions for new uploading APIs --- .jshintrc | 6 +- browser/ChangeLog.md | 11 + browser/samples/sample-blob.html | 87 +----- browser/samples/sample-file.html | 83 +----- lib/common/common.browser.js | 2 + lib/common/streams/batchoperation.js | 5 +- lib/common/streams/browserfilereadstream.js | 61 ++++ lib/common/streams/chunkstream.js | 5 +- lib/common/util/constants.js | 8 + lib/common/util/util.js | 16 ++ lib/common/util/validate.js | 28 ++ lib/services/blob/blobservice.browser.js | 300 ++++++++++++++++++++ lib/services/blob/blobservice.core.js | 36 +-- lib/services/blob/blobservice.node.js | 15 +- lib/services/file/fileservice.browser.js | 75 +++++ lib/services/file/fileservice.core.js | 6 +- lib/services/file/fileservice.node.js | 2 +- package.json | 4 - typings/azure-storage/azure-storage.d.ts | 233 ++++++++++++++- 19 files changed, 769 insertions(+), 214 deletions(-) create mode 100644 lib/common/streams/browserfilereadstream.js diff --git a/.jshintrc b/.jshintrc index fa2296c..8543421 100644 --- a/.jshintrc +++ b/.jshintrc @@ -24,5 +24,9 @@ "trailing": true, "undef": true, "unused": true, - "shadow": true + "shadow": true, + "globals": { + "FileReader": true, + "window": true + } } \ No newline at end of file diff --git a/browser/ChangeLog.md b/browser/ChangeLog.md index 76a69b0..f082e77 100644 --- a/browser/ChangeLog.md +++ b/browser/ChangeLog.md @@ -1,5 +1,16 @@ Note: This is the change log file for Azure Storage JavaScript Client Library. +2017.07 Version 0.2.2-preview.7 + +* Added browser specific APIs for blobs and files uploading. + * `BlobService.createBlockBlobFromBrowserFile` + * `BlobService.createPageBlobFromBrowserFile` + * `BlobService.createAppendBlobFromBrowserFile` + * `BlobService.appendFromBrowserFile` + * `FileService.createFileFromBrowserFile` +* Updated samples with above new added APIs. +* Dropped dependency to browserify-fs. + 2017.07 Version 0.2.2-preview.6 * Generated browser compatible JavaScript files based on Microsoft Azure Storage SDK for Node.js 2.2.1. diff --git a/browser/samples/sample-blob.html b/browser/samples/sample-blob.html index 2ecd962..aa43050 100644 --- a/browser/samples/sample-blob.html +++ b/browser/samples/sample-blob.html @@ -158,61 +158,19 @@ blobService.listBlobsSegmented('mycontainer', null, function (error, results) { });

Upload Blob

-

BlobService provides uploadBlobByStream for uploading a blob from stream. - However, currently uploadBlobByStream only accepts a Node.js ReadableStream type which pure JavaScript doesn't provide. +

BlobService provides createBlockBlobFromBrowserFile, createPageBlobFromBrowserFile, createAppendBlobFromBrowserFile and appendFromBrowserFile for uploading or appending a blob from an HTML file in browsers.

-
-
- Note: After importing azure-storage.common.js, you could require 3 Node.js types: stream, util and buffer, then wrap a ReadableStream based on HTML5 FileReader. -
-
-
-// Provides a Stream for a file in webpage, inheriting from NodeJS Readable stream.
-var Buffer = require('buffer').Buffer;
-var Stream = require('stream');
-var util = require('util');
-
-function FileStream(file, opt) {
-    Stream.Readable.call(this, opt);
-
-    this.fileReader = new FileReader(file);
-    this.file = file;
-    this.size = file.size;
-    this.chunkSize = 1024 * 1024 * 4; // 4MB
-    this.offset = 0;
-    var _me = this;
-    
-    this.fileReader.onloadend = function loaded(event) {
-        var data = event.target.result;
-        var buf = Buffer.from(data);
-        _me.push(buf);
-    }
-}
-util.inherits(FileStream, Stream.Readable);
-FileStream.prototype._read = function() {
-    if (this.offset > this.size) {
-        this.push(null);
-    } else {
-        var end = this.offset + this.chunkSize;
-        var slice = this.file.slice(this.offset, end);
-        this.fileReader.readAsArrayBuffer(slice);
-        this.offset = end;
-    }
-};
-

Uploading blob from stream. You can set up the blob name as well as the size of this uploading session. 

 // If one file has been selected in the HTML file input element
-var files = document.getElementById('fileinput').files;
-var file = files[0];
-var fileStream = new FileStream(file);
+var file = document.getElementById('fileinput').files[0];
 
 var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
 blobService.singleBlobPutThresholdInBytes = customBlockSize;
 
 var finishedOrError = false;
-var speedSummary = blobService.createBlockBlobFromStream('mycontainer', file.name, fileStream, file.size, {blockSize : customBlockSize}, function(error, result, response) {
+var speedSummary = blobService.createBlockBlobFromBrowserFile('mycontainer', file.name, file, {blockSize : customBlockSize}, function(error, result, response) {
     finishedOrError = true;
     if (error) {
         // Upload blob failed
@@ -318,41 +276,6 @@ blobService.deleteBlobIfExists(container, blob, function(error, result) {
          
         
 
-        
-
          
         
 
-        
-