How to fetch data with upload image to php server in React Native
10,494
To upload your photo you have to use Formdata
InsertUser = ()=>{
//constant variables that equal properties in state
const {TextInputName} = this.state;
const {TextInputEmail} = this.state;
const {TextInputPhoneNumber} = this.state;
const {iamgeSource} = this.state;
const formData = new FormData();
//Add your input data
formData.append('name', TextInputName);
formData.append('email', TextInputEmail);
formData.append('phone_number', TextInputPhoneNumber);
//Add your photo
//this, retrive the file extension of your photo
const uriPart = iamgeSource.split('.');
const fileExtension = uriPart[uriPart.length - 1];
formData.append('photo', {
uri: iamgeSource,
name: `photo.${fileExtension}`,
type: `image/${fileExtension}`
});
//API that use fetch to input data to database via backend php script
fetch('http://192.168.1.7/tr_reactnative/insert.php',{
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formData
})
.then((response) => response.json())
.then((responseJson) => {
// return responseJson
alert(responseJson);
this.props.navigation.navigate('seconde');
})
.catch((error) => {
console.error(error);
});
//alert('Pressed!!');
}
You'll find more information here.
Related videos on Youtube
Author by
Esam Mohamed
Updated on June 04, 2022Comments
-
Esam Mohamed over 1 year
i have a react native project that receive name , email ,phone number from text input then insert these data to php server throw fetch api and it works correctly but i need to make the user able to upload image and when click on save button all data (name,email,phone number,photo) saved to php server throw the api , Now i used "react-native-image-picker" and worked fine but i dont know how to use form data to upload the image with data throw api.
this is the react native code :
import React, { Component } from 'react'; import {View,Text,StyleSheet,TextInput,TouchableOpacity,Image} from 'react-native'; import ViewDataUsers from './ViewDataUsers'; import ImagePicker from 'react-native-image-picker'; const options={ title:'select a photo', takePhotoButtonTitle:'Take a Photo', chooseFrmoLibraryButtonTitle:'Choose from Gallery', quality:1 }; class InputUsers extends Component{ //constructor have a state that conatains the properties that will recieve the values from Text Inputes constructor(props){ super(props) this.state = { TextInputName:'', TextInputEmail:'', TextInputPhoneNumber:'', iamgeSource: null, } } selectPhoto(){ ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else { let source = { uri: response.uri }; this.setState({ iamgeSource: source }); } }); } //arrow function that will fire when press on save button to save data in database via API InsertUser = ()=>{ //constant varaibles that equal propertes in state const {TextInputName} = this.state; const {TextInputEmail} = this.state; const {TextInputPhoneNumber} = this.state; //API that use fetch to input data to database via backend php script fetch('http://192.168.1.7/tr_reactnative/insert.php',{ method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ name : TextInputName, email: TextInputEmail, phone_number : TextInputPhoneNumber, }) }) .then((response) => response.json()) .then((responseJson) => { // return responseJson alert(responseJson); this.props.navigation.navigate('seconde'); }) .catch((error) => { console.error(error); }); //alert('Pressed!!'); } ViewUsersList = ()=>{ this.props.navigation.navigate('seconde'); } render(){ return( <View style ={styles.container}> <TextInput // value = {this.TextInputName} placeholder = 'Enter Name' onChangeText = {TextInputValue=>this.setState({TextInputName:TextInputValue}) } underlineColorAndroid = 'transparent' style = {styles.TextInputStyle} /> <TextInput //value = {this.TextInputEmail} placeholder = 'Enter E-mail' onChangeText = {TextInputValue=>this.setState({TextInputEmail:TextInputValue}) } underlineColorAndroid = 'transparent' style = {styles.TextInputStyle2} /> <TextInput //value = {this.TextInputPhoneNumber} placeholder = 'Enter Phone Number' onChangeText = {TextInputValue=>this.setState({TextInputPhoneNumber:TextInputValue}) } underlineColorAndroid = 'transparent' style = {styles.TextInputStyle2} /> <Image style={styles.image} source={this.state.iamgeSource != null ? this.state.iamgeSource : require('./image/not_avilable.jpg')} /> <TouchableOpacity style = {styles.TouchableOpacityStyle} onPress={this.selectPhoto.bind(this)}> <Text style = {styles.TextStyle}>Select Photo</Text> </TouchableOpacity> <TouchableOpacity activeOpacity = {.4} style = {styles.TouchableOpacityStyle} onPress={this.InsertUser}> <Text style = {styles.TextStyle}>Save</Text> </TouchableOpacity> <TouchableOpacity activeOpacity = {.4} style = {styles.TouchableOpacityStyle} onPress={this.ViewUsersList}> <Text style = {styles.TextStyle}>View Users</Text> </TouchableOpacity> </View> ) } } const styles = StyleSheet.create ({ container : { alignItems:'center', flex:1, marginTop:5, backgroundColor:'#fff' }, TextInputStyle :{ textAlign:'center', marginBottom:7, width:'90%', height:40, borderWidth:1, borderRadius:5, borderColor:'#FF5722' }, TextInputStyle2 :{ textAlign:'center', marginBottom:7, marginTop:20, width:'90%', height:40, borderWidth:1, borderRadius:5, borderColor:'#FF5722' }, TextStyle : { color:'#fff', textAlign:'center' }, TouchableOpacityStyle:{ paddingTop:10, paddingBottom:10, marginTop:20, borderRadius:5, marginBottom:7, width:'90%', backgroundColor:'#00BCD4' }, button:{ width:250, height:50, backgroundColor:"#330066" }, text:{ color:'white', fontSize:30, textAlign:'center' }, image:{ width:200, height:200, marginTop:30 } }); export default InputUsers;
this is the php script:
<?php include 'connections.php'; $json = file_get_contents('php://input'); $obj = json_decode($json, true); $name = $obj['name']; $email = $obj['email']; $phone_number = $obj['phone_number']; if(mysqli_query($link, "INSERT INTO users(name,email, phone_number)VALUES('$name','$email','$phone_number')")){ echo json_encode('Inserted succesfully'); }else{ echo json_encode('insert faild'); } mysqli_close($link);
i need to send all data from app to php server including the image that user uploaded when hit save button , any Help ?
-
Esam Mohamed over 5 yearsANY HELP !!????
-
Esam Mohamed over 5 yearsis there any help or suggestions?
-
-
Esam Mohamed over 5 yearsThank you for your response , i tried this but i received error : imageSource.split is not a function
-
SuperSec over 5 yearsoups. Change
const uriPart = iamgeSource.split('.');
toconst uriPart = iamgeSource.uri.split('.');
anduri: iamgeSource,
touri: iamgeSource.uri,
. Hope that work this time. -
Esam Mohamed over 5 yearsfileExtension is not defined!
-
SuperSec over 5 yearsThere is a mistake in declaration of fileExtension. I edit it.
-
Zoe stands with Ukraine almost 5 years@QuentinEtienne just for future reference, you don't need to explicitly state that code naming is by design. Generally, spelling corrections in variable names really shouldn't be done in edits unless it's by OP. Rolling back is enough (but you can of course leave a comment and ping the editor too, although that's not required and in probably most cases isn't necessary)