Add getBlob

Author: schmidt-sebastian

packages/storage/exp/api.browser.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License 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 {
+  StorageReference,
+} from './public-types';
+import {
+  Reference,
+  getBlobInternal
+} from '../src/reference';
+import {  getModularInstance } from '@firebase/util';
+
+/**
+ * Downloads the data at the object's location. Returns an error if the object
+ * is not found.
+ *
+ * To use this functionality, you have to whitelist your app's origin in your
+ * Cloud Storage bucket. See also
+ * https://cloud.google.com/storage/docs/configuring-cors
+ *
+ * @public
+ * @param ref - StorageReference where data should be download.
+ * @returns A Promise that resolves with a Blob containing the object's bytes
+ */
+export function getBlob(ref: StorageReference): Promise<Blob> {
+  ref = getModularInstance(ref);
+  return getBlobInternal(ref as Reference);
+}
+

packages/storage/exp/index.node.ts

@@ -0,0 +1,76 @@
+/**
+ * Cloud Storage for Firebase
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License 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.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  _registerComponent,
+  registerVersion,
+  SDK_VERSION
+} from '@firebase/app-exp';
+
+import { FirebaseStorageImpl } from '../src/service';
+import {
+  Component,
+  ComponentType,
+  ComponentContainer,
+  InstanceFactoryOptions
+} from '@firebase/component';
+
+import { name, version } from '../package.json';
+
+import { FirebaseStorage } from './public-types';
+import { STORAGE_TYPE } from './constants';
+
+export { StringFormat } from '../src/implementation/string';
+export * from './api';
+
+function factory(
+  container: ComponentContainer,
+  { instanceIdentifier: url }: InstanceFactoryOptions
+): FirebaseStorage {
+  const app = container.getProvider('app-exp').getImmediate();
+  const authProvider = container.getProvider('auth-internal');
+  const appCheckProvider = container.getProvider('app-check-internal');
+
+  return new FirebaseStorageImpl(
+    app,
+    authProvider,
+    appCheckProvider,
+    url,
+    SDK_VERSION
+  );
+}
+
+function registerStorage(): void {
+  _registerComponent(
+    new Component(
+      STORAGE_TYPE,
+      factory,
+      ComponentType.PUBLIC
+    ).setMultipleInstances(true)
+  );
+
+  registerVersion(name, version);
+}
+
+registerStorage();

packages/storage/exp/index.ts

@@ -42,6 +42,7 @@ import { STORAGE_TYPE } from './constants';
 
 export { StringFormat } from '../src/implementation/string';
 export * from './api';
+export * from './api.browser';
 
 function factory(
   container: ComponentContainer,

packages/storage/karma.conf.js

@@ -44,7 +44,7 @@ function getTestFiles(argv) {
     );
     integrationTestFiles = ['test/integration/*compat*'];
   } else {
-    integrationTestFiles = ['test/integration/*'];
+    integrationTestFiles = ['test/integration/*', 'test/browser/*'];
   }
   if (argv.unit) {
     return unitTestFiles;

packages/storage/rollup.config.exp.js

@@ -76,7 +76,7 @@ const es2017Plugins = [
 const es2017Builds = [
   // Node
   {
-    input: './exp/index.ts',
+    input: './exp/index.node.ts',
     output: {
       file: path.resolve('./exp', pkgExp.main),
       format: 'cjs',

packages/storage/src/implementation/requests.ts

@@ -223,6 +223,23 @@ export function getBytesHandler(): RequestHandler<ArrayBuffer, ArrayBuffer> {
   return (xhr: Connection<ArrayBuffer>, data: ArrayBuffer) => data;
 }
 
+export function getBlob(
+  service: FirebaseStorageImpl,
+  location: Location
+): RequestInfo<Blob, Blob> {
+  const urlPart = location.fullServerUrl();
+  const url = makeUrl(urlPart, service.host) + '?alt=media';
+  const method = 'GET';
+  const timeout = service.maxOperationRetryTime;
+  const requestInfo = new RequestInfo(url, method, getBlobHandler(), timeout);
+  requestInfo.errorHandler = objectErrorHandler(location);
+  return requestInfo;
+}
+
+export function getBlobHandler(): RequestHandler<Blob, Blob> {
+  return (xhr: Connection<Blob>, data: Blob) => data;
+}
+
 export function getDownloadUrl(
   service: FirebaseStorageImpl,
   location: Location,

packages/storage/src/platform/browser/connection.ts

@@ -190,6 +190,54 @@ export function newBytesConnection(): Connection<ArrayBuffer> {
   return new XhrBytesConnection();
 }
 
+const MAX_ERROR_MSG_LENGTH = 512;
+
+export class XhrBlobConnection extends XhrConnection<Blob> {
+  private data_?: Blob;
+  private text_?: string;
+
+  initXhr(): void {
+    // We use Blob here instead of ArrayBuffer to ensure that this code works
+    // in Opera.
+    this.xhr_.responseType = 'blob';
+  }
+
+  getResponseText(): string {
+    if (!this.sent_) {
+      throw internalError('cannot .getResponseText() before sending');
+    }
+    return this.text_!;
+  }
+
+  getResponse(): Blob {
+    if (!this.sent_) {
+      throw internalError('cannot .getResponse() before sending');
+    }
+    return this.data_!;
+  }
+
+  send(
+    url: string,
+    method: string,
+    body?: ArrayBufferView | Blob | string,
+    headers?: Headers
+  ): Promise<void> {
+    return super
+      .send(url, method, body, headers)
+      .then(() => {
+        this.data_ = this.xhr_.response;
+        return this.data_!.slice(0, MAX_ERROR_MSG_LENGTH, 'string').text();
+      })
+      .then(text => {
+        this.text_ = text;
+      });
+  }
+}
+
+export function newBlobConnection(): Connection<Blob> {
+  return new XhrBlobConnection();
+}
+
 export function injectTestConnection(
   factory: (() => Connection<string>) | null
 ): void {

packages/storage/src/platform/connection.ts

@@ -18,6 +18,7 @@ import { Connection } from '../implementation/connection';
 import {
   newTextConnection as nodeNewTextConnection,
   newBytesConnection as nodeNewBytesConnection,
+  newBlobConnection as nodeNewBlobConnection,
   injectTestConnection as nodeInjectTestConnection
 } from './node/connection';
 
@@ -37,3 +38,8 @@ export function newBytesConnection(): Connection<ArrayBuffer> {
   // This file is only used under ts-node.
   return nodeNewBytesConnection();
 }
+
+export function newBlobConnection(): Connection<Blob> {
+  // This file is only used under ts-node.
+  return nodeNewBlobConnection();
+}

packages/storage/src/platform/node/connection.ts

@@ -151,3 +151,7 @@ export function injectTestConnection(
 ): void {
   textFactoryOverride = factory;
 }
+
+export function newBlobConnection(): Connection<Blob> {
+  throw new Error('Blobs are not supported on Node');
+}

packages/storage/src/reference.ts

@@ -30,7 +30,8 @@ import {
   getDownloadUrl as requestsGetDownloadUrl,
   deleteObject as requestsDeleteObject,
   multipartUpload,
-  getBytes
+  getBytes,
+  getBlob
 } from './implementation/requests';
 import { ListOptions } from '../exp/public-types';
 import { StringFormat, dataFromString } from './implementation/string';
@@ -41,7 +42,11 @@ import { UploadTask } from './task';
 import { invalidRootOperation, noDownloadURL } from './implementation/error';
 import { validateNumber } from './implementation/type';
 import { UploadResult } from './tasksnapshot';
-import { newBytesConnection, newTextConnection } from './platform/connection';
+import {
+  newBytesConnection,
+  newTextConnection,
+  newBlobConnection
+} from './platform/connection';
 
 /**
  * Provides methods to interact with a bucket in the Firebase Storage service.
@@ -157,6 +162,18 @@ export function getBytesInternal(ref: Reference): Promise<ArrayBuffer> {
     .then(request => request.getPromise());
 }
 
+/**
+ * Download the bytes at the object's location.
+ * @returns A Promise containing the downloaded bytes.
+ */
+export function getBlobInternal(ref: Reference): Promise<Blob> {
+  ref._throwIfRoot('getBytes');
+  const requestInfo = getBlob(ref.storage, ref._location);
+  return ref.storage
+    .makeRequestWithTokens(requestInfo, newBlobConnection)
+    .then(request => request.getPromise());
+}
+
 /**
  * Uploads data to this object's location.
  * The upload is not resumable.

packages/storage/test/browser/blob.test.ts

@@ -15,13 +15,32 @@
  * limitations under the License.
  */
 
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import * as sinon from 'sinon';
 import { FbsBlob } from '../../src/implementation/blob';
 import * as type from '../../src/implementation/type';
 import * as testShared from '../unit/testshared';
+import { ref, uploadBytes } from '../../exp/api';
+import * as types from '../../exp/public-types';
+import { createApp, createStorage } from '../integration/integration.exp.test';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FirebaseApp, deleteApp } from '@firebase/app-exp';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { getBlob } from '../../exp/api.browser';
 
 describe('Firebase Storage > Blob', () => {
+  let app: FirebaseApp;
+  let storage: types.FirebaseStorage;
+
+  beforeEach(async () => {
+    app = await createApp();
+    storage = createStorage(app);
+  });
+
+  afterEach(async () => {
+    await deleteApp(app);
+  });
+
   let stubs: sinon.SinonStub[] = [];
   before(() => {
     const definedStub = sinon.stub(type, 'isNativeBlobDefined');
@@ -47,6 +66,7 @@ describe('Firebase Storage > Blob', () => {
       new Uint8Array([2, 3, 4, 5])
     );
   });
+
   it('Blobs are merged with strings correctly', () => {
     const blob = new FbsBlob(new Uint8Array([1, 2, 3, 4]));
     const merged = FbsBlob.getBlob('what', blob, '\ud83d\ude0a ')!;
@@ -70,4 +90,26 @@ describe('Firebase Storage > Blob', () => {
 
     assert.equal(20, concatenated!.size());
   });
+
+  it('can get blob', async () => {
+    const reference = ref(storage, 'public/exp-bytes');
+    await uploadBytes(reference, new Uint8Array([0, 1, 3, 128, 255]));
+    const blob = await getBlob(reference);
+    const bytes = await blob.arrayBuffer();
+    expect(new Uint8Array(bytes)).to.deep.equal(
+      new Uint8Array([0, 1, 3, 128, 255])
+    );
+  });
+
+  it('getBlob() throws for missing file', async () => {
+    const reference = ref(storage, 'public/exp-bytes-missing');
+    try {
+      await getBlob(reference);
+      expect.fail();
+    } catch (e) {
+      expect(e.message).to.satisfy((v: string) =>
+        v.match(/Object 'public\/exp-bytes-missing' does not exist/)
+      );
+    }
+  });
 });

packages/storage/test/integration/integration.exp.test.ts

@@ -47,19 +47,28 @@ export const STORAGE_BUCKET = PROJECT_CONFIG.storageBucket;
 export const API_KEY = PROJECT_CONFIG.apiKey;
 export const AUTH_DOMAIN = PROJECT_CONFIG.authDomain;
 
+export async function createApp(): Promise<FirebaseApp> {
+  const app = initializeApp({
+    apiKey: API_KEY,
+    projectId: PROJECT_ID,
+    storageBucket: STORAGE_BUCKET,
+    authDomain: AUTH_DOMAIN
+  });
+  await signInAnonymously(getAuth(app));
+  return app;
+}
+
+export function createStorage(app: FirebaseApp): types.FirebaseStorage {
+  return getStorage(app);
+}
+
 describe('FirebaseStorage Exp', () => {
   let app: FirebaseApp;
   let storage: types.FirebaseStorage;
 
   beforeEach(async () => {
-    app = initializeApp({
-      apiKey: API_KEY,
-      projectId: PROJECT_ID,
-      storageBucket: STORAGE_BUCKET,
-      authDomain: AUTH_DOMAIN
-    });
-    await signInAnonymously(getAuth(app));
-    storage = getStorage(app);
+    app = await createApp();
+    storage = createStorage(app);
   });
 
   afterEach(async () => {