the data is not being uploaded, this is my React Native:
import React, { Component } from 'react'; import {View,Text,StyleSheet,TextInput,TouchableOpacity,Image} from 'react-native';
import ImagePicker from 'react-native-image-picker'; import { Dropdown } from 'react-native-material-dropdown';
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,
data: [
{
value: 'Computadoras encendidas',
},
{
value: 'Puerta Abierta',
},
{
value: 'llaves perdidas',
},
{
value: 'Retraso de personal',
},
{
value: 'alarmas desactivadas',
},
{
value: 'personal no reconocido',
},
{
value: 'Agresion',
},
{
value: 'Aulas desordenadas',
},
{
value: 'No hay empleados',
},
{
value: 'No llego compa;ero',
},
{
value: 'Fugas de gas',
},
{
value: 'Puerta esta cerrada',
},
],
}
}
selectPhoto(){
ImagePicker.launchCamera(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; 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.uri.split('.'); const fileExtension = uriPart[uriPart.length - 1];
formData.append('iamgeSource', {
uri: iamgeSource.uri,
name: 'iamgeSource',
type: 'image/jpeg', });
//API that use fetch to input data to database via backend php script fetch('http://192.168.0.16/conex/insert.php',{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
body: formData }) .then((response) => response.json()) .then((responseJson) => { // return responseJson
alert(responseJson);
this.props.navigation.navigate('home');
})
.catch((error) => {
console.error(error);
});
//alert('Pressed!!'); }
render(){
return(
<View style ={styles.container}>
<TextInput
// value = {this.TextInputName}
placeholder = 'Descripcion del incidente'
onChangeText = {TextInputValue=>this.setState({TextInputName:TextInputValue}) }
underlineColorAndroid = 'transparent'
style = {styles.TextInputStyle}
/>
<View style={styles.textInput2}>
<Dropdown
label="Seleccion incidente"
data={this.state.data}
onChangeText= {TextInputValue=>this.setState({TextInputEmail:TextInputValue}) }
/>
</View>
<Image style={styles.image}
source={this.state.iamgeSource != null ? this.state.iamgeSource : require('./image/blogSix.png')}
/>
<TouchableOpacity style = {styles.TouchableOpacityStyle} onPress={this.selectPhoto.bind(this)}>
<Text style = {styles.TextStyle}>Seleccione la foto</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = {.4} style = {styles.TouchableOpacityStyle} onPress={this.InsertUser}>
<Text style = {styles.TextStyle}>Enviar incidente</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'
},
textInput2: {
textAlign:'center',
marginBottom:7,
marginTop:20,
width:'90%',
height:40,
borderWidth:1,
borderRadius:5,
borderColor:'#FF5722',
paddingBottom:25,
},
image:{
width:200,
height:200,
marginTop:30
}
});
export default InputUsers;
This is my php file
<?php include 'config2.php';
$json = file_get_contents('php://input');
$obj = json_decode($json, true);
$name = $obj['name'];
$email = $obj['email'];
$phone_number = $obj['phone_number'];
$iamgeSource = $obj['iamgeSource'];
if(mysqli_query($db, "INSERT INTO users(name,lastname, city, photo)VALUES('$name','$email','$phone_number','$iamgeSource')")){
echo json_encode('Incidente incertado correctamente');
}else{
echo json_encode('Fallo a el enviar el incidente');
}
mysqli_close($db);
this is the base data