Fix unicode response issue

Fetch polyfill wip #70

src/index.js

@@ -112,6 +112,7 @@ function fetch(...args:any):Promise {
   let taskId = getUUID()
   let options = this || {}
   let subscription, subscriptionUpload, stateEvent
+  let respInfo = {}
 
   let promise = new Promise((resolve, reject) => {
     let [method, url, headers, body] = [...args]
@@ -131,6 +132,7 @@ function fetch(...args:any):Promise {
     })
 
     stateEvent = emitter.addListener('RNFetchBlobState', (e) => {
+      respInfo = e
       if(e.taskId === taskId && promise.onStateChange) {
         promise.onStateChange(e)
       }
@@ -144,27 +146,26 @@ function fetch(...args:any):Promise {
 
     let req = RNFetchBlob[nativeMethodName]
 
-    req(options, taskId, method, url, headers || {}, body, (err, info, data) => {
+    req(options, taskId, method, url, headers || {}, body, (err, unsused, data) => {
 
       // task done, remove event listener
       subscription.remove()
       subscriptionUpload.remove()
       stateEvent.remove()
-      info = info ? info : {}
+
       if(err)
         reject(new Error(err, info))
       else {
         let rnfbEncode = 'base64'
         // response data is saved to storage
         if(options.path || options.fileCache || options.addAndroidDownloads
-          || options.key || options.auto && info.respType === 'blob') {
+          || options.key || options.auto && respInfo.respType === 'blob') {
           rnfbEncode = 'path'
           if(options.session)
             session(options.session).add(data)
         }
-        info = info || {}
-        info.rnfbEncode = rnfbEncode
-        resolve(new FetchBlobResponse(taskId, info, data))
+        respInfo.rnfbEncode = rnfbEncode
+        resolve(new FetchBlobResponse(taskId, respInfo, data))
       }
 
     })
@@ -240,7 +241,6 @@ class FetchBlobResponse {
           try {
             let b = new polyfill.Blob(this.data, 'application/octet-stream;BASE64')
             b.onCreated(() => {
-              console.log('####', b)
               resolve(b)
             })
           } catch(err) {
@@ -254,7 +254,7 @@ class FetchBlobResponse {
      * @return {string} Decoded base64 string.
      */
     this.text = ():string => {
-      return base64.decode(this.data)
+      return decodeURIComponent(base64.decode(this.data))
     }
     /**
      * Convert result to JSON object.

src/ios/RNFetchBlobConst.h

@@ -29,6 +29,7 @@ extern NSString *const CONFIG_FILE_EXT;
 extern NSString *const CONFIG_TRUSTY;
 extern NSString *const CONFIG_INDICATOR;
 extern NSString *const CONFIG_KEY;
+extern NSString *const CONFIG_EXTRA_BLOB_CTYPE;
 
 // fs events
 extern NSString *const FS_EVENT_DATA;

src/ios/RNFetchBlobConst.m

@@ -20,6 +20,7 @@ extern NSString *const CONFIG_FILE_EXT = @"appendExt";
 extern NSString *const CONFIG_TRUSTY = @"trusty";
 extern NSString *const CONFIG_INDICATOR = @"indicator";
 extern NSString *const CONFIG_KEY = @"key";
+extern NSString *const CONFIG_EXTRA_BLOB_CTYPE = @"binaryContentTypes";
 
 extern NSString *const EVENT_STATE_CHANGE = @"RNFetchBlobState";
 extern NSString *const MSG_EVENT = @"RNFetchBlobMessage";

src/ios/RNFetchBlobFS.m

@@ -234,7 +234,7 @@ NSMutableDictionary *fileStreams = nil;
             return;
         }
         else {
-            content = [data dataUsingEncoding:NSISOLatin1StringEncoding];
+            content = [data dataUsingEncoding:NSUTF8StringEncoding];
         }
         if(append == YES) {
             [fileHandle seekToEndOfFile];
@@ -333,8 +333,13 @@ NSMutableDictionary *fileStreams = nil;
                 onComplete(fileContent);
             
             if([[encoding lowercaseString] isEqualToString:@"utf8"]) {
-                if(resolve != nil)
-                    resolve([[NSString alloc] initWithData:fileContent encoding:NSUTF8StringEncoding]);
+                if(resolve != nil) {
+                    NSString * utf8 = [[NSString alloc] initWithData:fileContent encoding:NSUTF8StringEncoding];
+                    if(utf8 == nil)
+                        resolve([[NSString alloc] initWithData:fileContent encoding:NSISOLatin1StringEncoding]);
+                    else
+                        resolve(utf8);
+                }
             }
             else if ([[encoding lowercaseString] isEqualToString:@"base64"]) {
                 if(resolve != nil)

src/ios/RNFetchBlobNetwork.m

@@ -201,7 +201,21 @@ NSOperationQueue *taskQueue;
                                lowercaseString];
         if([headers valueForKey:@"Content-Type"] != nil)
         {
-            if([respType containsString:@"text/"])
+            NSArray * extraBlobCTypes = [options objectForKey:CONFIG_EXTRA_BLOB_CTYPE];
+            // If extra blob content type is not empty, check if response type matches
+            if( extraBlobCTypes !=  nil) {
+                for(NSString * substr in extraBlobCTypes)
+                {
+                    if([[respType lowercaseString] containsString:[substr lowercaseString]])
+                    {
+                        respType = @"blob";
+                        respFile = YES;
+                        destPath = [RNFetchBlobFS getTempPath:taskId withExtension:nil];
+                        break;
+                    }
+                }
+            }
+            else if([respType containsString:@"text/"])
             {
                 respType = @"text";
             }
@@ -315,11 +329,17 @@ NSOperationQueue *taskQueue;
     }
     // base64 response
     else {
-        NSString * res = [[NSString alloc] initWithData:respData encoding:NSUTF8StringEncoding];
+        NSString * utf8 = [[[NSString alloc] initWithData:respData encoding:NSUTF8StringEncoding] stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
+        NSString * base64 = @"";
+        if(utf8 != nil)
+            base64 = [[utf8 dataUsingEncoding:NSUTF8StringEncoding] base64EncodedStringWithOptions:0];
+        else
+            base64 = [respData base64EncodedStringWithOptions:0];
         callback(@[error == nil ? [NSNull null] : [error localizedDescription],
                    respInfo == nil ? [NSNull null] : respInfo,
-                   [respData base64EncodedStringWithOptions:0]
-                   ]);
+                   base64
+                ]);
+        
     }
     
     [taskTable removeObjectForKey:taskId];

src/polyfill/Fetch.js

@@ -0,0 +1,89 @@
+import RNFetchBlob from '../index.js'
+import Log from '../utils/log.js'
+import fs from '../fs'
+import unicode from '../utils/unicode'
+
+const log = new Log('FetchPolyfill')
+
+log.level(3)
+
+
+export default class Fetch {
+
+  provider:RNFetchBlobFetch;
+
+  constructor(config:RNFetchBlobConfig) {
+    this.provider = new RNFetchBlobFetch(config)
+  }
+
+}
+
+class RNFetchBlobFetch {
+
+  constructor(config:RNFetchBlobConfig) {
+    this._fetch = (url, options) => {
+      let bodyUsed = false
+      options.headers = options.headers || {}
+      options['Content-Type'] = options.headers['Content-Type'] || options.headers['content-type']
+      options['content-type'] = options.headers['Content-Type'] || options.headers['content-type']
+      return RNFetchBlob.config(config)
+        .fetch(options.method, url, options.headers, options.body)
+        .then((resp) => {
+          let info = resp.info()
+          return Promise.resolve({
+            headers : info.headers,
+            ok : info.status >= 200 && info.status <= 299,
+            status : info.status,
+            type : 'basic',
+            bodyUsed,
+            arrayBuffer : () => {
+              log.verbose('to arrayBuffer', info)
+
+            },
+            text : () => {
+              log.verbose('to text', resp, info)
+              switch (info.rnfbEncode) {
+                case 'base64':
+                  let result = unicode(resp.text())
+                  return Promise.resolve(result)
+                  break
+                case 'path':
+                  return resp.readFile('utf8').then((data) => {
+                    data = unicode(data)
+                    return Promise.resolve(data)
+                  })
+                  break
+                case '':
+                default:
+                  return Promise.resolve(resp.data)
+                  break
+              }
+            },
+            json : () => {
+              log.verbose('to json', resp, info)
+              switch (info.rnfbEncode) {
+                case 'base64':
+                  return Promise.resolve(resp.json())
+                case 'path':
+                  return resp.readFile('utf8').then((data) => {
+                    return Promise.resolve(JSON.parse(data))
+                  })
+                case '':
+                default:
+                  return Promise.resolve(JSON.parse(resp.data))
+              }
+            },
+            formData : () => {
+              log.verbose('to formData', resp, info)
+
+            }
+          })
+        })
+    }
+  }
+
+  get fetch() {
+    return this._fetch
+  }
+
+}

src/polyfill/FileReader.js

@@ -0,0 +1,91 @@
+// 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 RNFetchBlob from '../index.js'
+import ProgressEvent from './ProgressEvent.js'
+import EventTarget from './EventTarget'
+import Blob from './Blob'
+import Log from '../utils/log.js'
+import fs from '../fs'
+
+const log = new Log('FileReader')
+
+log.level(3)
+
+export default class FileReader extends EventTarget {
+
+  static get EMPTY(){
+    return 0
+  }
+  static get LOADING(){
+    return 1
+  }
+  static get DONE(){
+    return 2
+  }
+
+  // properties
+  _readState:number = 0;
+  _result:any;
+  _error:any;
+
+  get isRNFBPolyFill(){ return true }
+
+  // event handlers
+  onloadstart:(e:Event) => void;
+  onprogress:(e:Event) => void;
+  onload:(e:Event) => void;
+  onabort:(e:Event) => void;
+  onerror:(e:Event) => void;
+  onloadend:(e:Event) => void;
+
+  constructor() {
+    super()
+    log.verbose('file reader const')
+    this._result = null
+  }
+
+  abort() {
+    log.verbose('abort', b, label)
+  }
+
+  readAsArrayBuffer(b:Blob) {
+    log.verbose('readAsArrayBuffer', b, label)
+  }
+
+  readAsBinaryString(b:Blob) {
+    log.verbose('readAsBinaryString', b, label)
+  }
+
+  readAsText(b:Blob, label:?string) {
+    log.verbose('readAsText', b, label)
+  }
+
+  readAsDataURL(b:Blob) {
+    log.verbose('readAsDataURL', b, label)
+  }
+
+  dispatchEvent(event, e) {
+    log.verbose('dispatch event', event, e)
+    super.dispatchEvent(event, e)
+    if(typeof this[`on${event}`] === 'function') {
+      this[`on${event}`](e)
+    }
+  }
+
+  // private methods
+
+  // getters and setters
+
+  get readState() {
+    return this._readyState
+  }
+
+  get result() {
+    return this._result
+  }
+
+
+
+}

src/polyfill/XMLHttpRequest.js

@@ -10,7 +10,7 @@ import ProgressEvent from './ProgressEvent.js'
 
 const log = new Log('XMLHttpRequest')
 
-log.disable()
+log.level(0)
 
 const UNSENT = 0
 const OPENED = 1
@@ -23,6 +23,7 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
   _onreadystatechange : () => void;
 
   upload : XMLHttpRequestEventTarget = new XMLHttpRequestEventTarget();
+  static binaryContentTypes : Array<string> = [];
 
   // readonly
   _readyState : number = UNSENT;
@@ -79,6 +80,25 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
     return DONE
   }
 
+  static addBinaryContentType(substr:string) {
+    for(let i in XMLHttpRequest.binaryContentTypes) {
+      if(new RegExp(substr,'i').test(XMLHttpRequest.binaryContentTypes[i])) {
+        return
+      }
+    }
+    XMLHttpRequest.binaryContentTypes.push(substr)
+
+  }
+
+  static removeBinaryContentType(val) {
+    for(let i in XMLHttpRequest.binaryContentTypes) {
+      if(new RegExp(substr,'i').test(XMLHttpRequest.binaryContentTypes[i])) {
+        XMLHttpRequest.binaryContentTypes.splice(i,1)
+        return
+      }
+    }
+  }
+
   constructor() {
     super()
     log.verbose('XMLHttpRequest constructor called')
@@ -127,9 +147,12 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
       body = body ? body.toString() : body
 
     this._task = RNFetchBlob
-                  .config({ auto: true, timeout : this._timeout })
+                  .config({
+                    auto: true,
+                    timeout : this._timeout,
+                    binaryContentTypes : XMLHttpRequest.binaryContentTypes
+                  })
                   .fetch(_method, _url, _headers, body)
-    this.dispatchEvent('load')
     this._task
         .stateChange(this._headerReceived.bind(this))
         .uploadProgress(this._uploadProgressEvent.bind(this))
@@ -281,8 +304,8 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
           this._response = this.responseText
         break;
       }
-      this.dispatchEvent('loadend')
       this.dispatchEvent('load')
+      this.dispatchEvent('loadend')
       this._dispatchReadStateChange(XMLHttpRequest.DONE)
     }
     this.clearEventListeners()
@@ -348,6 +371,11 @@ export default class XMLHttpRequest extends XMLHttpRequestEventTarget{
     return this._timeout
   }
 
+  set responseType(val) {
+    log.verbose('set response type', this._responseType)
+    this._responseType = val
+  }
+
   get responseType() {
     log.verbose('get response type', this._responseType)
     return this._responseType

src/polyfill/index.js

@@ -3,7 +3,9 @@ import File from './File.js'
 import XMLHttpRequest from './XMLHttpRequest.js'
 import ProgressEvent from './ProgressEvent'
 import Event from './Event'
+import FileReader from './FileReader'
+import Fetch from './Fetch'
 
 export default {
-  Blob, File, XMLHttpRequest, ProgressEvent, Event
+  Blob, File, XMLHttpRequest, ProgressEvent, Event, FileReader, Fetch
 }

src/utils/unicode.js

@@ -0,0 +1,7 @@
+export default function(x) {
+  var r = /\\u([\d\w]{4})/gi
+  x = x.replace(r, function (match, grp) {
+    return String.fromCharCode(parseInt(grp, 16))
+  })
+  return unescape(x)
+}

test-server/server.js

@@ -63,6 +63,10 @@ app.use(function(req, res, next) {
   next();
 })
 
+app.get('/unicode', (req, res) => {
+  res.send({ data:'你好!'})
+})
+
 app.all('/echo', (req, res) => {
   var body = ''
   req.on('data', (chunk) => {

test/test-0.8.2.js

@@ -0,0 +1,58 @@
+import RNTest from './react-native-testkit/'
+import React from 'react'
+import RNFetchBlob from 'react-native-fetch-blob'
+
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  Platform,
+  Dimensions,
+  Image,
+} from 'react-native';
+
+window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
+window.Blob = Blob
+window.fetch = new RNFetchBlob.polyfill.Fetch({
+  auto : true,
+  binaryContentTypes : ['image/', 'video/', 'audio/']
+}).provider.fetch
+
+const fs = RNFetchBlob.fs
+const { Assert, Comparer, Info, prop } = RNTest
+const describe = RNTest.config({
+  group : '0.8.2',
+  run : true,
+  expand : true,
+  timeout : 20000,
+})
+const { TEST_SERVER_URL, TEST_SERVER_URL_SSL, FILENAME, DROPBOX_TOKEN, styles } = prop()
+const dirs = RNFetchBlob.fs.dirs
+
+let prefix = ((Platform.OS === 'android') ? 'file://' : '')
+
+describe('unicode file access', (report, done) => {
+  let path = dirs.DocumentDir + '/chinese.tmp'
+  fs.writeFile(path, '你好!', 'utf8')
+    .then(() => fs.readFile(path, 'utf8'))
+    .then((data) => {
+      console.log(data)
+      done()
+    })
+})
+
+describe('whatwg-fetch - GET should work correctly', (report, done) => {
+  console.log(fetch)
+  fetch(`${TEST_SERVER_URL}/unicode`, {
+    method : 'GET'
+  })
+  .then((res) => {
+    console.log('fetch resp',res)
+    return res.text()
+  })
+  .then((blob) => {
+    console.log(blob)
+    done()
+  })
+})

test/test-fs.js

@@ -97,10 +97,11 @@ describe('create file API test', (report, done) => {
               d += chunk
             })
             stream.onEnd(() => {
-              report(<Assert
-                key="base64 content test"
-                expect={raw}
-                actual={d}/>)
+              report(
+                <Assert
+                  key="base64 content test"
+                  expect={raw}
+                  actual={d}/>)
                 done()
               })
         })

test/test-init.js

@@ -18,8 +18,8 @@ const { Assert, Comparer, Info, prop } = RNTest
 // test environment variables
 
 prop('FILENAME', `${Platform.OS}-0.8.0-${Date.now()}.png`)
-prop('TEST_SERVER_URL', 'http://192.168.0.11:8123')
-prop('TEST_SERVER_URL_SSL', 'https://192.168.0.11:8124')
+prop('TEST_SERVER_URL', 'http://192.168.16.70:8123')
+prop('TEST_SERVER_URL_SSL', 'https://192.168.16.70:8124')
 prop('DROPBOX_TOKEN', 'fsXcpmKPrHgAAAAAAAAAoXZhcXYWdgLpQMan6Tb_bzJ237DXhgQSev12hA-gUXt4')
 prop('styles', {
   image : {
@@ -64,11 +64,12 @@ describe('GET image from server', (report, done) => {
 // require('./test-0.6.0')
 // require('./test-0.6.2')
 // require('./test-0.6.3')
-require('./test-0.7.0')
+// require('./test-0.7.0')
 // require('./test-0.8.0')
+require('./test-0.8.2')
 // require('./test-fs')
 // require('./test-xmlhttp')
 // require('./test-blob')
-require('./test-firebase')
+// require('./test-firebase')
 // require('./test-android')
 // require('./benchmark')