React Native image upload : <p>I am having an issue with uploading an image from my camera roll or to my API. here is the code that I am currently using. I am able to get the image data from both the camera roll and camera. I just am having an issue of posting the data to the server. I don't know where I am getting confused. </p>

<pre><code>import React, { Component } from 'react';
import {
  Text,
  View,
  PixelRatio,
  TouchableOpacity,
  Image,
  Platform,
  NativeModules,
  DeviceEventEmitter
} from 'react-native';
import { connect } from 'react-redux';
import ImagePicker from 'react-native-image-picker';
import { captureProflieAvitar } from '../../actions';

var RNUploader = NativeModules.RNUploader;
class NewCamera extends Component {
  state = {
    avatarSource: null,
    imgBase64: []
  }
  componentDidMount() {
    // upload progress
    DeviceEventEmitter.addListener('RNUploaderProgress', (data) =&gt; {
      const bytesWritten = data.totalBytesWritten;
      const bytesTotal = data.totalBytesExpectedToWrite;
      const progress = data.progress;
      console.log(bytesWritten, bytesTotal);
      console.log( "upload progress: " + progress + "%");
    });
}

  selectPhotoTapped() {
    const options = {
      quality: 0.75,
      maxWidth: 300,
      maxHeight: 300,
      storageOptions: {
      skipBackup: true
      }
    };
    ImagePicker.showImagePicker(options, (response) =&gt; {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        let source;
        // You can display the image using either:
        source = { uri: 'data:image/jpeg;base64,' + response.data, isStatic: true };

        const temp = response.data;

        //Or:
        if (Platform.OS === 'android') {
          source = { uri: response.uri, isStatic: true };
        } else {
          source = { uri: response.uri.replace('file://', ''), isStatic: true };
        }

        this.setState({
          avatarSource: source,
          imgBase64: temp,
        });
      }
    });
  }

doUpload() {

    const files = {
            filepath: `data:image/png;base64,${this.state.imgBase64}`,
        };
    const opts = {
        url: 'https://central.tipflip.co?apior=MYAPIKEY&amp;tfReqID3031&amp;tfUserID=1&amp;tfImage=',
        files,
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    };

    RNUploader.upload(opts, (err, response) =&gt; {
        if (err) {
            console.log(err);
            return;
        }
        const status = response.status;
        const responseString = response.data;
        const json = JSON.parse(responseString);
        console.log('upload complete with status ' + status);
    });
}
  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}&gt;
          &lt;View style={[styles.avatar, styles.avatarContainer, { marginBottom: 20 }]}&gt;
          { this.state.avatarSource === null ? &lt;Text&gt;Select a Photo&lt;/Text&gt; :
            &lt;Image style={styles.avatar} source={this.state.avatarSource} /&gt;
          }
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;

        &lt;TouchableOpacity
          style={{
          backgroundColor: 'yellow',
          width: 60,
          height: 20,
          marginTop: 20,
          justifyContent: 'center',
          alignItems: 'center' }}
          onPress={this.doUpload.bind(this)}
        &gt;
          &lt;Text&gt;Upload&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;

        &lt;TouchableOpacity
        style={{
          backgroundColor: 'yellow',
          width: 60,
          height: 20,
          marginTop: 20,
          justifyContent: 'center',
          alignItems: 'center'
          }} onPress={this.props.cancel}
        &gt;
          &lt;Text&gt;Cancel&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;

      &lt;/View&gt;
    );
  }
}
const styles = {
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarContainer: {
    borderColor: '#9B9B9B',
    borderWidth: 1 / PixelRatio.get(),
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatar: {
    borderRadius: 75,
    width: 150,
    height: 150
  }

};
export default connect(null, { captureProflieAvitar })(NewCamera);
</code></pre>
