React Native Image Upload as Form Data - json

Question

Postman formdata is working perfectly, but this returns following http 500 error. what is wrong with this block.
Response {type: "default", status: 500, ok: false, statusText:
undefined, headers: Headers, …}headers: Headers {map: {…}}ok:
falsestatus: 500statusText: undefinedtype: "default"url:
"http://cupdes.com/api/v1/create-user"_bodyInit: ""_bodyText:
""proto: Object "rtghj"
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 = () => {
const options = {
noData: true,
};
ImagePicker.launchImageLibrary(options, response => {
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 = () => {
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) => {
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=()=>{
this.props.navigation.navigate('DrewerNav')
}
SignuptologinHandler=()=>{
this.props.navigation.navigate('SigntoLogin')
}
render() {
const { photo } = this.state;
return (
<KeyboardAvoidingView
style={styles.wrapper}
>
<View style={styles.scrollWrapper}>
<ScrollView style={styles.scrollView}>
<View style={styles.LogoContainer}>
<Image source={require('../Images/avatar1.png')} style={styles.Logo} onPress={this.handleChoosePhoto} />
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{photo && (
<Image
source={{ uri: photo.uri,
type: "image/jpeg",
name: photo.filename }}
style={{ width: 125, height: 125,borderRadius:80}}
/>
)
}
<TouchableOpacity >
<Icon name="image" size={30} color="#222" marginTop='30' position='absolute' onPress={this.handleChoosePhoto}position='relative'/>
</TouchableOpacity>
</View>
<Text style={styles.createNew1}> CREATE ACCOUNT</Text>
</View>
<View>
<Form style={styles.inputwrapper} >
<Item >
<Icon name="user" size={25} color="white"/>
<Input style={styles.input}
placeholder='Your name'
placeholderTextColor={'white'}
name="name"
onChangeText={text => this.setState({ name: text })}
/>
</Item>
<Item >
<Icon name="mail-bulk" size={25} color="white"/>
<Input style={styles.input}
placeholder='Your e-mail'
placeholderTextColor={'white'}
name="email"
onChangeText={text => this.setState({ email: text })}
/>
</Item>
<Item >
<Icon name="lock" size={25} color="white"/>
<Input style={styles.input}
secureTextEntry
placeholder='Your password'
placeholderTextColor={'white'}
name="password"
onChangeText={text => this.setState({ password: text })}
/>
</Item >
<Item >
<Icon name="unlock" size={25} color="white"/>
<Input style={styles.input}
secureTextEntry
placeholder='Confirm password'
placeholderTextColor={'white'}
name="password"
/>
</Item>
</Form>
</View>
<View>
<TouchableOpacity >
<Button style={styles.btnLogin} onPress={this.onPressSubmitButton.bind(this)}
>
<Text style={styles.text} >Sign Up </Text>
</Button>
</TouchableOpacity>
<TouchableOpacity onPress={this.SignuptologinHandler} >
<Text style={styles.createNew}> Have an account ?LOG IN</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
);
}
}

Answer 1

I may be very late in posting the answer but it may be helpful for others who encountered the same error. The following workflow worked for me. I used node.js as my backend.
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
path: 'images',
cameraRoll: true,
waitUntilSaved: true,
},
};
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('User cancelled photo picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
let source = response;
this.setState({profileImage: source});
}
});
}
saveToServer(){
let {profileImage} = this.state;
// initilizing form data
let formData = new FormData();
formData.append('file', {
uri: profileImage.uri,
type: 'image/jpeg/jpg',
name: profileImage.fileName,
data: profileImage.data,
});
axios.post('http://192.156.0.22:3000/api/updateProfile', userDetail, {
headers: {'Content-Type': 'multipart/form-data'},
}).then(res => //)
.catch(err => //);
}
And in the node server, I am doing something like this.
//index.js
//..
const formData = require('express-form-data');
//..
//
app.use(formData.parse());
// profile.js
profile.post('/updateProfile', async (req, res) => {
let imageCloud = await cloudinary.v2.uploader.upload(req.files.file.path, {
use_filename: true
});
}
Note: I'm using cloudinary to store my images.
The above code is working for both android and iOS.
I hope this will help you in some extent.

Answer 2

I don't know if you are running into an issue with just Android but I had errors posting images and videos on Android only where I was getting Network Request failed.
More info here Fetch requests failing on Android to AWS S3 endpoint
The solution was basically that the fileType sent in formData needed to be have the '/jpg' or '/mp4' in my cases and ImagePicker only returns type 'image' or 'video'. iOS apparently allows the request fine but Android will not.

Answer 3

its seem to be last replay you can check also this my artical.
uploadImageToServer = () => {
RNFetchBlob.fetch('POST', base.BASE_URL + '/php_imagefileupload.php', {
Authorization: "Bearer access-token",
otherHeader: "foo",
'Content-Type': 'multipart/form-data',
}, [
{ name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
{ name: 'image_tag', data: this.state.Image_TAG, data: this.state.username }
]).then((resp) => {
var tempMSG = resp.data;
tempMSG = tempMSG.replace(/^"|"$/g, '');
Alert.alert(tempMSG);
}).catch((err) => {
// ...
})
}
blog url : https://www.banglacleverprogrammer.life/2020/05/react-native-upload-image-to-server.html

Answer 4

I have the same issue, it happens on Android, but works well on IOS.
I found this issue about Flipper_Network.
For now, I commented
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
in the file MainApplication.java

Answer 5

createFormData = () => {
console.log("RESPOSTA FORMDATA")
console.log("NAME: " + this.state.photo.fileName);
console.log("TYPE: " + this.state.photo.type);
console.log("URI: " + this.state.photo.uri);
console.log("PATH: " + this.state.photo.path);
var foto = {
uri: Platform.OS === "android" ? this.state.photo.uri : this.state.photo.uri.replace("file://", ""),
type: this.state.photo.type,
name: this.state.photo.fileName,
path: this.state.photo.path
};
const fotoUsuario = new FormData();
fotoUsuario.append("foto", foto)
return fotoUsuario;
};