title: React Native Image Upload as Form Data
body: <p>Postman formdata is working perfectly, but this returns following http 500 error. what is wrong with this block.</p>
  
  <p><br/></p>
  
  <blockquote>
    <p>Response {type: "default", status: 500, ok: false, statusText:
    undefined, headers: Headers, …}headers: Headers {map: {…}}ok:
    falsestatus: 500statusText: undefinedtype: "default"url:
    "<a href="http://cupdes.com/api/v1/create-user" rel="nofollow noreferrer">http://cupdes.com/api/v1/create-user</a>"_bodyInit: ""_bodyText:
    ""<strong>proto</strong>: Object "rtghj"</p>
  </blockquote>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet,View,Image,ScrollView,TextInput,KeyboardAvoidingView,TouchableOpacity,TouchableHighlight,AsyncStorage,} from 'react-native';
  import { Container, Header, Content, Button, Text,Input, Label,Item,Form, } from 'native-base';
  import Icon from 'react-native-vector-icons/FontAwesome5';
  import ImagePicker from 'react-native-image-picker';
  
  export default class SignUp extends Component {
    constructor(){
      super();
      this.state = {
        email: "",
        name: "",
        password: "",
        photo: null ,
  
        errors: [],
        showProgress: false,
      }
  }
  handleChoosePhoto = () =&gt; {
    const options = {
      noData: true,
    };
    ImagePicker.launchImageLibrary(options, response =&gt; {
      if (response.uri) {
        this.setState({ photo: response });
      }
    });
  };
  
  onPressSubmitButton() {
    console.log("Image ",this.state.photo,this.state.email,this.state.password,this.state.name)
    this.onFetchLoginRecords();
  } 
  
  async onFetchLoginRecords() {
  
  
  
  const createFormData = () =&gt; {
    var data = new FormData();
  
    data.append("image", {
      name: this.state.photo.fileName,
      type: this.state.photo.type,
      uri:
        Platform.OS === "android" ? this.state.photo.uri : this.state.photo.uri.replace("file://", "")
    });
    data.append('name', this.state.name);
    data.append('password',this.state.password);
    data.append('email', this.state.email);
    console.log("aaaa",data);
    return data;
  };
  
  
  try {
    let response = await fetch(
  
     'http://cupdes.com/api/v1/create-user',
     {
       method: 'POST',
       headers: {
        'X-AUTH-TOKEN': 'Px7zgU79PYR9ULEIrEetsb',
        'Content-Type': 'multipart/form-data'
  
       },
      body:createFormData() 
  
    }
   )
   .then((response) =&gt; {
   console.log(response,"rtghj") 
   this.setState({ photo: null });
   if (JSON.parse(response._bodyText) === null) {
    alert("Internal server error!!!");
   }else{
    if (JSON.parse(response._bodyText).success === "true") {
      this.props.navigation.navigate('loading');
     }else{
  
      alert("Data missing!!!");
   }
  }
  
   })
  
       } catch (errors) {
      alert(errors);
  } 
  }    SignupHandler=()=&gt;{
          this.props.navigation.navigate('DrewerNav')
      }
      SignuptologinHandler=()=&gt;{
          this.props.navigation.navigate('SigntoLogin')
      }
    render() {
      const { photo } = this.state;
      return (
  
        &lt;KeyboardAvoidingView
        style={styles.wrapper}
        &gt;
  
          &lt;View style={styles.scrollWrapper}&gt;
   &lt;ScrollView style={styles.scrollView}&gt;
   &lt;View style={styles.LogoContainer}&gt;
   &lt;Image source={require('../Images/avatar1.png')} style={styles.Logo}  onPress={this.handleChoosePhoto} /&gt;
  
   &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}&gt;
  
          {photo &amp;&amp; (
            &lt;Image
              source={{ uri: photo.uri,
                type: "image/jpeg",
                name: photo.filename  }}
              style={{ width: 125, height: 125,borderRadius:80}}
  
            /&gt;
  
          )
          }
        &lt;TouchableOpacity &gt;
          &lt;Icon  name="image" size={30} color="#222" marginTop='30' position='absolute' onPress={this.handleChoosePhoto}position='relative'/&gt;
            &lt;/TouchableOpacity&gt;
        &lt;/View&gt; 
          &lt;Text style={styles.createNew1}&gt;  CREATE ACCOUNT&lt;/Text&gt;  
          &lt;/View&gt;
          &lt;View&gt;
  
          &lt;Form style={styles.inputwrapper} &gt;
  
              &lt;Item  &gt;
              &lt;Icon  name="user" size={25} color="white"/&gt;
                &lt;Input     style={styles.input}
                            placeholder='Your name'
                            placeholderTextColor={'white'}
                           name="name"
                           onChangeText={text =&gt; this.setState({ name: text })}
                /&gt;
              &lt;/Item&gt;
              &lt;Item &gt;
              &lt;Icon  name="mail-bulk" size={25} color="white"/&gt;
                &lt;Input style={styles.input}
                        placeholder='Your e-mail'
                        placeholderTextColor={'white'}
                      name="email"
                      onChangeText={text =&gt; this.setState({ email: text })}
                 /&gt;
              &lt;/Item&gt;
              &lt;Item   &gt;
              &lt;Icon  name="lock" size={25} color="white"/&gt;
                &lt;Input  style={styles.input}
                        secureTextEntry 
                        placeholder='Your password'
                        placeholderTextColor={'white'}
                        name="password"
                        onChangeText={text =&gt; this.setState({ password: text })}
                /&gt;
              &lt;/Item &gt;
              &lt;Item  &gt;
              &lt;Icon  name="unlock" size={25} color="white"/&gt;
                &lt;Input  style={styles.input}
                        secureTextEntry 
                        placeholder='Confirm password'
                        placeholderTextColor={'white'}
                        name="password"
                /&gt;
              &lt;/Item&gt;
            &lt;/Form&gt;
          &lt;/View&gt;
          &lt;View&gt;
            &lt;TouchableOpacity &gt;
            &lt;Button style={styles.btnLogin} onPress={this.onPressSubmitButton.bind(this)}
  
      &gt;
              &lt;Text style={styles.text} &gt;Sign Up &lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity onPress={this.SignuptologinHandler}  &gt;
            &lt;Text style={styles.createNew}&gt;  Have an account ?LOG IN&lt;/Text&gt;  
            &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
        &lt;/ScrollView&gt;
   &lt;/View&gt;
        &lt;/KeyboardAvoidingView&gt;
      );
    }
  }
  </code></pre>