add progressListener for android when using FormData to upload files

Summary:
When using FormData upload images or files, in Android version, network module cannot send an event for showing progress.
This PR will solve this issue.
I changed example in XHRExample for Android, you can see uploading progress in warning yellow bar.
Closes https://github.com/facebook/react-native/pull/7256

Differential Revision: D3390087

fbshipit-source-id: 7f3e53c80072fff397afd6f5fe17bf0f2ecd83b2

Examples/UIExplorer/XHRExample.android.js

@@ -24,6 +24,8 @@ var {
   TextInput,
   TouchableHighlight,
   View,
+  Image,
+  CameraRoll
 } = ReactNative;
 
 var XHRExampleHeaders = require('./XHRExampleHeaders');
@@ -127,6 +129,8 @@ class Downloader extends React.Component {
   }
 }
 
+var PAGE_SIZE = 20;
+
 class FormUploader extends React.Component {
 
   _isMounted: boolean;
@@ -143,6 +147,8 @@ class FormUploader extends React.Component {
     this._isMounted = true;
     this._addTextParam = this._addTextParam.bind(this);
     this._upload = this._upload.bind(this);
+    this._fetchRandomPhoto = this._fetchRandomPhoto.bind(this);
+    this._fetchRandomPhoto();
   }
 
   _addTextParam() {
@@ -151,6 +157,25 @@ class FormUploader extends React.Component {
     this.setState({textParams});
   }
 
+  _fetchRandomPhoto() {
+    CameraRoll.getPhotos(
+      {first: PAGE_SIZE}
+    ).then(
+      (data) => {
+        if (!this._isMounted) {
+          return;
+        }
+        var edges = data.edges;
+        var edge = edges[Math.floor(Math.random() * edges.length)];
+        var randomPhoto = edge && edge.node && edge.node.image;
+        if (randomPhoto) {
+          this.setState({randomPhoto});
+        }
+      },
+      (error) => undefined
+    );
+  }
+
   componentWillUnmount() {
     this._isMounted = false;
   }
@@ -201,19 +226,29 @@ class FormUploader extends React.Component {
     this.state.textParams.forEach(
       (param) => formdata.append(param.name, param.value)
     );
-    if (xhr.upload) {
-      xhr.upload.onprogress = (event) => {
-        console.log('upload onprogress', event);
-        if (event.lengthComputable) {
-          this.setState({uploadProgress: event.loaded / event.total});
-        }
-      };
+    if (this.state.randomPhoto) {
+      formdata.append('image', {...this.state.randomPhoto, type:'image/jpg', name: 'image.jpg'});
     }
+    xhr.upload.onprogress = (event) => {
+      console.log('upload onprogress', event);
+      if (event.lengthComputable) {
+        this.setState({uploadProgress: event.loaded / event.total});
+      }
+    };
     xhr.send(formdata);
     this.setState({isUploading: true});
   }
 
   render() {
+    var image = null;
+    if (this.state.randomPhoto) {
+      image = (
+        <Image
+          source={this.state.randomPhoto}
+          style={styles.randomPhoto}
+        />
+      );
+    }
     var textItems = this.state.textParams.map((item, index) => (
       <View style={styles.paramRow}>
         <TextInput
@@ -252,6 +287,15 @@ class FormUploader extends React.Component {
     }
     return (
       <View>
+        <View style={[styles.paramRow, styles.photoRow]}>
+          <Text style={styles.photoLabel}>
+            Random photo from your library
+            (<Text style={styles.textButton} onPress={this._fetchRandomPhoto}>
+              update
+            </Text>)
+          </Text>
+          {image}
+        </View>
         {textItems}
         <View>
           <Text
@@ -320,6 +364,10 @@ var styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'grey',
   },
+  randomPhoto: {
+    width: 50,
+    height: 50,
+  },
   textButton: {
     color: 'blue',
   },

Examples/UIExplorer/XHRExample.ios.js

@@ -231,14 +231,13 @@ class FormUploader extends React.Component {
     this.state.textParams.forEach(
       (param) => formdata.append(param.name, param.value)
     );
-    if (xhr.upload) {
-      xhr.upload.onprogress = (event) => {
-        console.log('upload onprogress', event);
-        if (event.lengthComputable) {
-          this.setState({uploadProgress: event.loaded / event.total});
-        }
-      };
-    }
+    xhr.upload.onprogress = (event) => {
+      console.log('upload onprogress', event);
+      if (event.lengthComputable) {
+        this.setState({uploadProgress: event.loaded / event.total});
+      }
+    };
+
     xhr.send(formdata);
     this.setState({isUploading: true});
   }