Add XMLHttpRequest and related polyfills #44

src/ios/RNFetchBlobNetwork.m

@@ -137,15 +137,36 @@ NSOperationQueue *taskQueue;
     expectedBytes = [response expectedContentLength];
  
     NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse*)response;
+    NSInteger statusCode = [(NSHTTPURLResponse *)response statusCode];
     if ([response respondsToSelector:@selector(allHeaderFields)])
     {
         NSDictionary *headers = [httpResponse allHeaderFields];
+        NSString * respType = [[headers valueForKey:@"Content-Type"] lowercaseString];
+        if([headers valueForKey:@"Content-Type"] != nil)
+        {
+            if([respType containsString:@"text/plain"])
+            {
+                respType = @"text";
+            }
+            else if([respType containsString:@"application/json"])
+            {
+                respType = @"json";
+            }
+            else
+            {
+                respType = @"blob";
+            }
+        }
+        else
+            respType = @"";
         [self.bridge.eventDispatcher
          sendDeviceEventWithName: EVENT_STATE_CHANGE
          body:@{
                 @"taskId": taskId,
                 @"state": @"2",
-                @"headers": headers
+                @"headers": headers,
+                @"respType" : respType,
+                @"status": [NSString stringWithFormat:@"%d", statusCode ]
             }
          ];
     }
@@ -200,6 +221,7 @@ NSOperationQueue *taskQueue;
     }
     // base64 response
     else {
+        NSString * res = [[NSString alloc] initWithData:respData encoding:NSUTF8StringEncoding];
         callback(@[error == nil ? [NSNull null] : [error localizedDescription], [respData base64EncodedStringWithOptions:0]]);
     }
 }

src/ios/RNFetchBlobReqBuilder.m

@@ -110,13 +110,22 @@
                 }
                 // otherwise convert it as BASE64 data string
                 else {
-                    blobData = [[NSData alloc] initWithBase64EncodedString:body options:0];
-                    [request setHTTPBody:blobData];
-                }
-                
-                if([mheaders valueForKey:@"content-type"] == nil)
-                {
-                    [mheaders setValue:@"application/octet-stream" forKey:@"content-type"];
+                    // the body is BASE64 encoded string
+                    if(([mheaders valueForKey:@"content-type"] == nil && [mheaders valueForKey:@"Content-Type"] == nil) ||
+                       ([[[mheaders valueForKey:@"content-type"] lowercaseString] isEqualToString:@"application/octet-stream"] ||
+                        [[[mheaders valueForKey:@"Content-Type"] lowercaseString] isEqualToString:@"application/octet-stream"]))
+                    {
+                        blobData = [[NSData alloc] initWithBase64EncodedString:body options:0];
+                        [mheaders setValue:@"application/octet-stream" forKey:@"Content-Type"];
+                        [request setHTTPBody:blobData];
+                        size = [blobData length];
+                    }
+                    // use the body string as is
+                    else
+                    {
+                        size = [body length];
+                        [request setHTTPBody: [body dataUsingEncoding:NSUTF8StringEncoding]];
+                    }
                 }
                 
             }

src/polyfill/EventTarget.js

@@ -1,16 +1,21 @@
 // Copyright 2016 wkh237@github. All rights reserved.
 // Use of this source code is governed by a MIT-style license that can be
 // found in the LICENSE file.
+import Log from '../utils/log.js'
+
+const log = new Log('EventTarget')
 
 export default class EventTarget {
 
   listeners : any;
 
   constructor() {
+    log.info('constructor called')
     this.listeners = {}
   }
 
   addEventListener(type:string, cb : () => void) {
+    log.info('add event listener', type, cb)
     if(!(type in this.listeners)) {
       this.listeners[type] = []
     }
@@ -18,6 +23,7 @@ export default class EventTarget {
   }
 
   removeEventListener(type:string, cb:() => any) {
+    log.info('remove event listener', type, cb)
     if(!(type in this.listeners))
       return
     let handlers = this.listeners[type]
@@ -30,6 +36,7 @@ export default class EventTarget {
   }
 
   dispatchEvent(event:Event) {
+    log.info('dispatch event', event)
     if(!(event.type in this.listeners))
       return
     let handlers = this.listeners[event.type]

src/polyfill/XMLHttpRequest.js

@@ -3,30 +3,30 @@
 // found in the LICENSE file.
 
 import RNFetchBlob from '../index.js'
-import EventTarget from './EventTarget.js'
-
-export default class XMLHttpRequest extends EventTarget{
-
-  onreadystatechange : () => void;
-  onabort : () => void;
-  onerror : () => void;
-  onload : () => void;
-  onloadstart : () => void;
-  onprogress : () => void;
-  ontimeout : () => void;
-  onloadend : () => void;
-
-  readyState : number;
-  response : any;
-  responseText : any;
-  responseHeaders : any;
-  responseType : '' | 'arraybuffer' | 'blob' | 'document' | 'json' | 'text';
+import XMLHttpRequestEventTarget from './XMLHttpRequestEventTarget.js'
+
+const UNSENT = 0
+const OPENED = 1
+const HEADERS_RECEIVED = 2
+const LOADING = 3
+const DONE = 4
+
+export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
+
+  _onreadystatechange : () => void;
+
+  _readyState : number = UNSENT;
+  _response : any = '';
+  _responseText : any = '';
+  _responseHeaders : any = '';
+  _responseType : '' | 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' = '';
   // TODO : not suppoted for now
-  responseURL : null;
-  responseXML : null;
-  status : number;
-  statusText : string;
-  timeout : number;
+  _responseURL : null = '';
+  _responseXML : null = '';
+  _status : number;
+  _statusText : string;
+  _timeout : number = 0;
+  _upload : XMLHttpRequestEventTarget;
 
   // RNFetchBlob compatible data structure
   _config : RNFetchBlobConfig;
@@ -39,34 +39,40 @@ export default class XMLHttpRequest extends EventTarget{
   // `cancel` methods.
   _task: any;
 
+  static get UNSENT() {
+    return UNSENT
+  }
+
+  static get OPENED() {
+    return OPENED
+  }
+
+  static get HEADERS_RECEIVED() {
+    return HEADERS_RECEIVED
+  }
+
+  static get LOADING() {
+    return LOADING
+  }
+
+  static get DONE() {
+    return DONE
+  }
+
   constructor(...args) {
     super()
     console.log('XMLHttpRequest constructor called', args)
     this._config = {}
     this._args = {}
     this._headers = {}
-    this.readyState = 0
-    this.response = null
-    this.responseText = null
-    this.responseHeaders = null
   }
 
   // XMLHttpRequest.open, always async, user and password not supported.
   open(method:string, url:string, async:true, user:any, password:any) {
-    console.log('XMLHttpRequest open called', method, url, async, user, password)
+    console.log('XMLHttpRequest open ', method, url, async, user, password)
     this._method = method
     this._url = url
-    this.readyState = 1
-    if(this.onload)
-      this.onload()
-    if(this.onloadstart)
-      this.onloadstart()
-    this._invokeOnStateChange()
-  }
-
-  addEventListener(event, listener) {
-    console.log('XMLHttpRequest add listener', event, listener.toString())
-    this.addEventListener(event, listener)
+    this.readyState = XMLHttpRequest.OPENED
   }
 
   /**
@@ -74,28 +80,26 @@ export default class XMLHttpRequest extends EventTarget{
    * @param  {any} body Body in RNfetchblob flavor
    */
   send(body) {
-    console.log('XMLHttpRequest send called', body)
+    console.log('XMLHttpRequest send ', body)
     let {_method, _url, _headers } = this
     console.log('sending request with args', _method, _url, _headers, body)
+    this._upload = new XMLHttpRequestEventTarget()
+    this.dispatchEvent('loadstart')
+    if(this.onloadstart)
+      this.onloadstart()
 
     this._task = RNFetchBlob.fetch(_method, _url, _headers, body)
     this._task
-        .stateChange((e) => {
-          console.log('state change')
-          if(e.state === "2") {
-            this.readyState = 2
-            this.responseHeaders = e.headers
-          }
-          this._invokeOnStateChange()
-        })
-        .uploadProgress(this._progressEvent)
-        .onProgress(this._progressEvent)
-        .then(this._onDone)
-        .catch(this._onError)
+        .stateChange(this._headerReceived.bind(this))
+        .uploadProgress(this._progressEvent.bind(this))
+        .progress(this._progressEvent.bind(this))
+        .catch(this._onError.bind(this))
+        .then(this._onDone.bind(this))
   }
 
   overrideMimeType(mime:string) {
-    this.headers['content-type'] = mime
+    console.log('XMLHttpRequest overrideMimeType', mime)
+    this._headers['content-type'] = mime
   }
 
   setRequestHeader(name, value) {
@@ -104,7 +108,7 @@ export default class XMLHttpRequest extends EventTarget{
   }
 
   abort() {
-    console.log('XMLHttpRequest abort called', this._task)
+    console.log('XMLHttpRequest abort ')
     if(!this._task)
       return
     this._task.cancel((err) => {
@@ -113,7 +117,7 @@ export default class XMLHttpRequest extends EventTarget{
       }
       if(this.onabort)
         this.onabort()
-      if(!err) {
+      if(err) {
         e.detail = err
         e.type = 'error'
         this.dispatchEvent('error', e)
@@ -126,7 +130,7 @@ export default class XMLHttpRequest extends EventTarget{
   }
 
   getResponseHeader(field:string):string | null {
-
+    console.log('XMLHttpRequest get header', field)
     if(!this.responseHeaders)
       return null
     return this.responseHeaders[field] || null
@@ -134,7 +138,7 @@ export default class XMLHttpRequest extends EventTarget{
   }
 
   getAllResponseHeaders():string | null {
-
+    console.log('XMLHttpRequest get all headers')
     if(!this.responseHeaders)
       return null
     let result = ''
@@ -145,17 +149,33 @@ export default class XMLHttpRequest extends EventTarget{
     return result
   }
 
+  _headerReceived(e) {
+    console.log('header received ', e)
+    this.responseURL = this._url
+    if(e.state === "2") {
+      this.readyState = XMLHttpRequest.HEADERS_RECEIVED
+      this.responseHeaders = e.headers
+      this._responseText = e.status
+      this._responseType = e.respType || ''
+      this.status = Math.floor(e.status)
+    }
+  }
+
   _progressEvent(send:number, total:number) {
+    console.log(this.readyState)
+    if(this.readyState === XMLHttpRequest.HEADERS_RECEIVED)
+      this.readyState = XMLHttpRequest.LOADING
     let lengthComputable = false
+    let e = { lengthComputable }
     if(total && total >= 0)
-        lengthComputable = true
+        e.lengthComputable = true
     else {
-      this.dispatchEvent('progress',
-        { loaded : send, total, lengthComputable })
+      Object.assign(e, { loaded : send, total })
     }
 
     if(this.onprogress)
-      this.onprogress({loaded : send, total, lengthComputable})
+      this.onprogress(e)
+    this.dispatchEvent('progress', e)
   }
 
   _onError(err) {
@@ -163,42 +183,130 @@ export default class XMLHttpRequest extends EventTarget{
     this.statusText = err
     this.status = String(err).match(/\d+/)
     this.status = this.status ? Math.floor(this.status) : 404
-    this.readyState = 4
+    this.readyState = XMLHttpRequest.DONE
     if(String(err).match('timeout') !== null) {
+      this.dispatchEvent('timeout')
       if(this.ontimeout)
         this.ontimeout()
     }
     else if(this.onerror) {
+      this.dispatchEvent('error')
       this.onerror({
         type : 'error',
         detail : err
       })
     }
-    this._invokeOnStateChange()
   }
 
   _onDone(resp) {
     console.log('XMLHttpRequest done', resp.text())
     this.statusText = '200 OK'
-    this.status = 200
+    this._status = 200
     switch(resp.type) {
       case 'base64' :
-      this.responseType = 'text'
-      this.responseText = resp.text()
-      this.response = this.responseText
+        if(this.responseType === 'json') {
+            this._responseText = resp.text()
+            this._response = resp.json()
+        }
+        else {
+          this._responseType = resp.text()
+          this._response = this.responseText
+        }
       break;
       case 'path' :
-      this.responseType = 'blob'
-      this.response = resp.blob()
+        this.responseType = 'blob'
+        this.response = resp.blob()
       break;
     }
-    this.readyState = 4
-    this._invokeOnStateChange()
+    this.dispatchEvent('loadend')
+    if(this.onloadend)
+      this.onloadend()
+    this.dispatchEvent('load')
+    if(this._onload)
+      this._onload()
+    this.readyState = XMLHttpRequest.DONE
+  }
+
+  set onreadystatechange(fn:() => void) {
+    console.log('XMLHttpRequest set onreadystatechange', fn.toString())
+    this._onreadystatechange = fn
+  }
+
+  set readyState(val:number) {
+
+    console.log('XMLHttpRequest ready state changed to ', val)
+    this._readyState = val
+    if(this._onreadystatechange) {
+      console.log('trigger onreadystatechange event', this._readyState)
+      console.log(this._onreadystatechange)
+      this.dispatchEvent('readystatechange', )
+      if(this._onreadystatechange)
+        this._onreadystatechange()
+    }
+  }
+
+  get readyState() {
+    console.log('get readyState', this._readyState)
+    return this._readyState
+  }
+
+  get status() {
+    console.log('get status', this._status)
+    return this._status
+  }
+
+  set statusText(val) {
+    this._statusText = val
+  }
+
+  get statusText() {
+    console.log('get statusText', this._statusText)
+    return this._statusText
+  }
+
+  set response(val) {
+    console.log('set response', val)
+    this._response = val
+  }
+
+  get response() {
+    console.log('get response', this._response)
+    return this._response
+  }
+
+  get responseText() {
+    console.log('get responseText', this._responseText)
+    return this._responseText
+  }
+
+  get responseURL() {
+    console.log('get responseURL', this._responseURL)
+    return this._responseURL
+  }
+
+  get responseHeaders() {
+    console.log('get responseHeaders', this._responseHeaders)
+    return this._responseHeaders
+  }
+
+  set timeout(val) {
+    console.log('set timeout', this._timeout)
+    this._timeout = val
+  }
+
+  get timeout() {
+    console.log('get timeout', this._timeout)
+    return this._timeout
+  }
+
+  get upload() {
+    console.log('get upload', this._upload)
+    return this._upload
   }
 
-  _invokeOnStateChange() {
-    if(this.onreadystatechange)
-      this.onreadystatechange()
+  get responseType() {
+    console.log('get response type', this._responseType)
+    return this._responseType
   }
 
 }

src/polyfill/XMLHttpRequestEventTarget.js

@@ -0,0 +1,86 @@
+// Copyright 2016 wkh237@github. All rights reserved.
+// Use of this source code is governed by a MIT-style license that can be
+// found in the LICENSE file.
+import EventTarget from './EventTarget.js'
+import Log from '../utils/log.js'
+
+const log = new Log('XMLHttpRequestEventTarget')
+
+export default class XMLHttpRequestEventTarget extends EventTarget {
+
+  _onabort : (e:Event) => void;
+  _onerror : (e:Event) => void;
+  _onload : (e:Event) => void;
+  _onloadstart : (e:Event) => void;
+  _onprogress : (e:Event) => void;
+  _ontimeout : (e:Event) => void;
+  _onloadend : (e:Event) => void;
+
+  constructor() {
+    super()
+    log.info('constructor called')
+  }
+
+  set onabort(fn:(e:Event) => void) {
+    log.info('set onabort')
+    this._onabort = fn
+  }
+
+  get onabort() {
+    return this._onabort
+  }
+  set onerror(fn:(e:Event) => void) {
+    log.info('set onerror')
+    this._onerror = fn
+  }
+
+  get onerror() {
+    return this._onerror
+  }
+
+  set onload(fn:(e:Event) => void) {
+    log.info('set onload')
+    this._onload = fn
+  }
+
+  get onload() {
+    return this._onload
+  }
+
+  set onloadstart(fn:(e:Event) => void) {
+    log.info('set onloadstart')
+    this._onloadstart = fn
+  }
+
+  get onloadstart() {
+    return this._onloadstart
+  }
+
+  set onprogress(fn:(e:Event) => void) {
+    log.info('set onprogress')
+    this._onprogress = fn
+  }
+
+  get onprogress() {
+    return this._onprogress
+  }
+
+  set ontimeout(fn:(e:Event) => void) {
+    log.info('set ontimeout')
+    this._ontimeout = fn
+  }
+
+  get ontimeout() {
+    return this._ontimeout
+  }
+
+  set onloadend(fn:(e:Event) => void) {
+    log.info('set onloadend')
+    this._onloadend = fn
+  }
+
+  get onloadend() {
+    return this._onloadend
+  }
+
+}

src/utils/log.js

@@ -0,0 +1,21 @@
+export default class Log {
+
+  _name:string;
+
+  constructor(name:string) {
+    this._name = name
+  }
+
+  info(...args) {
+    console.log(this._name, '-info:', ...args)
+  }
+
+  debug(...args) {
+    console.log(this._name, '-debug:', ...args)
+  }
+
+  error(...args) {
+    console.log(this._name, '-error:', ...args)
+  }
+
+}