React Native image upload

Question

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.

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) => {
      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) => {
      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&tfReqID3031&tfUserID=1&tfImage=',
        files,
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    };

    RNUploader.upload(opts, (err, response) => {
        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 (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
          <View style={[styles.avatar, styles.avatarContainer, { marginBottom: 20 }]}>
          { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
            <Image style={styles.avatar} source={this.state.avatarSource} />
          }
          </View>
        </TouchableOpacity>

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

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

      </View>
    );
  }
}
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);

Answer 1

Here is example to upload image using Fetch API

var photo = {
  uri: user.profilePicture,
  type: 'image/jpeg',
  name: 'photo.jpg',
};

var form = new FormData();
form.append("ProfilePicture", photo);

fetch(
  Constants.API_USER + 'me/profilePicture',
  {
    body: form,
    method: "PUT",
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': 'Bearer ' + user.token
    }
  }
).then((response) => response.json())
.catch((error) => {
  alert("ERROR " + error)
})
.then((responseData) => {
  alert("Succes "+ responseData)
}).done();

Credits https://stackoverflow.com/a/36649457/5315786

Answer 2

If anyone trying to upload an image to Laravel using React Native try this. my case i'm using react-native-image-crop-picker with Axios

//create object with uri, type, image name
var photo = {
    uri: IMAGE_PATH,
    type: 'image/jpeg',
    name: 'photo.jpg',
};

//use formdata
var formData = new FormData(); 
//append created photo{} to formdata
formData.append('image', photo);
//use axios to POST
axios({
    method: 'POST',
    url: api_url +  'customer/upload-avatar',
    data: formData,
    headers: {
        'Authorization': "Bearer  "  +  YOUR_BEARER_TOKEN,
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data;'    
    }}) .then(function (response) { console.log(response)})
    .catch(function (error) { console.log(error.response)
});