feat(http): add support for blob as a response type (#10190)

modules/@angular/http/src/backends/xhr_backend.ts

@@ -120,6 +120,9 @@ export class XHRConnection implements Connection {
           case ResponseContentType.Text:
             _xhr.responseType = 'text';
             break;
+          case ResponseContentType.Blob:
+            _xhr.responseType = 'blob';
+            break;
           default:
             throw new Error('The selected responseType is not supported');
         }

modules/@angular/http/src/base_response_options.ts

@@ -46,9 +46,9 @@ import {ResponseOptionsArgs} from './interfaces';
 export class ResponseOptions {
   // TODO: FormData | Blob
   /**
-   * String, Object, ArrayBuffer representing the body of the {@link Response}.
+   * String, Object, ArrayBuffer or Blob representing the body of the {@link Response}.
    */
-  body: string|Object|ArrayBuffer;
+  body: string|Object|ArrayBuffer|Blob;
   /**
    * Http {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html status code}
    * associated with the response.

modules/@angular/http/src/enums.ts

@@ -67,7 +67,8 @@ export enum ContentType {
  * @experimental
  */
 export enum ResponseContentType {
-  ArrayBuffer,
+  Text,
   Json,
-  Text
+  ArrayBuffer,
+  Blob
 }

modules/@angular/http/src/interfaces.ts

@@ -67,8 +67,7 @@ export interface RequestArgs extends RequestOptionsArgs { url: string; }
  * @experimental
  */
 export type ResponseOptionsArgs = {
-  // TODO: Support Blob, JSON
+  body?: string | Object | FormData | ArrayBuffer | Blob; status?: number; statusText?: string;
-  body?: string | Object | FormData | ArrayBuffer; status?: number; statusText?: string;
   headers?: Headers;
   type?: ResponseType;
   url?: string;

modules/@angular/http/test/backends/xhr_backend_spec.ts

@@ -20,7 +20,7 @@ import {Headers} from '../../src/headers';
 import {Map} from '../../src/facade/collection';
 import {RequestOptions, BaseRequestOptions} from '../../src/base_request_options';
 import {BaseResponseOptions, ResponseOptions} from '../../src/base_response_options';
-import {ResponseType} from '../../src/enums';
+import {ResponseType, ResponseContentType} from '../../src/enums';
 import {URLSearchParams} from '../../src/url_search_params';
 
 var abortSpy: any;
@@ -53,6 +53,9 @@ class MockBrowserXHR extends BrowserXhr {
     this.send = sendSpy = spy.spy('send');
     this.open = openSpy = spy.spy('open');
     this.setRequestHeader = setRequestHeaderSpy = spy.spy('setRequestHeader');
+    // If responseType is supported by the browser, then it should be set to an empty string.
+    // (https://www.w3.org/TR/XMLHttpRequest/#the-responsetype-attribute)
+    this.responseType = '';
   }
 
   setStatusCode(status: number) { this.status = status; }
@@ -652,6 +655,24 @@ export function main() {
            existingXHRs[0].setStatusCode(statusCode);
            existingXHRs[0].dispatchEvent('load');
          }));
+
+      it('should set the responseType attribute to blob when the corresponding response content type is present',
+         inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
+           var statusCode = 200;
+           var base = new BaseRequestOptions();
+           var connection = new XHRConnection(
+               new Request(
+                   base.merge(new RequestOptions({responseType: ResponseContentType.Blob}))),
+               new MockBrowserXHR());
+
+           connection.response.subscribe((res: Response) => {
+             expect(existingXHRs[0].responseType).toBe('blob');
+             async.done();
+           });
+
+           existingXHRs[0].setStatusCode(statusCode);
+           existingXHRs[0].dispatchEvent('load');
+         }));
     });
   });
 }

tools/public_api_guard/http/index.d.ts

@@ -179,14 +179,15 @@ export declare class Response extends Body {
 
 /** @experimental */
 export declare enum ResponseContentType {
-    ArrayBuffer = 0,
+    Text = 0,
     Json = 1,
-    Text = 2,
+    ArrayBuffer = 2,
+    Blob = 3,
 }
 
 /** @experimental */
 export declare class ResponseOptions {
-    body: string | Object | ArrayBuffer;
+    body: string | Object | ArrayBuffer | Blob;
     headers: Headers;
     status: number;
     url: string;
@@ -196,7 +197,7 @@ export declare class ResponseOptions {
 
 /** @experimental */
 export declare type ResponseOptionsArgs = {
-    body?: string | Object | FormData | ArrayBuffer;
+    body?: string | Object | FormData | ArrayBuffer | Blob;
     status?: number;
     statusText?: string;
     headers?: Headers;