Image upload to php server

#1

i kn i am probably not the first one but
Can anybody please help me, i am not able to upload image to a php server(nginx) and save it after picking it from the image picker.
How exactly do i upload it using fetch, and handle the php server side as well

i need it for a school project

#2

and handle the php server side as well

This is not the right place to ask this, maybe you can do some R&D and learn some php? And ask on stackoverflow if you get stuck. Uploading image using fetch is already answered here.

#3

Hey @techstreat! There are a lot of small concepts that you’ll need to pick up to get it working the way you expect it.

I recommend you check out this example and come back with any questions you may have! https://github.com/expo/image-upload-example

Good luck :slight_smile:

#4

i know php very well so can anyone help out if you can

#5

import React from ‘react’;
import {
StyleSheet,
View,
Text,
StatusBar,
TouchableOpacity,
TextInput,
Button,
Image
} from ‘react-native’;
import { Ionicons } from ‘@expo/vector-icons’;
import { ImagePicker } from ‘expo’;
import axios from ‘axios’;

export default class Productadd extends React.Component {

state = {
photo:null,
price:’’,
pname:’’
}

render() {
let { photo } = this.state;
return (

     <TouchableOpacity style={styles.opp}
     onPress={this.upload.bind(this)}>
     <Text style={styles.postleft}>POST PRODUCT</Text></TouchableOpacity>
     
      
     <View style={styles.photobox}>
     <TouchableOpacity style={styles.closex}
     onPress={() => this.props.navigation.navigate("Homie")}>
          <Ionicons style={styles.closetext}
          name="md-close-circle-outline" size={70} color="#fff"
          />
    </TouchableOpacity>
      
       {photo &&
      <Image source={{ uri:photo}} 
      style={styles.imageUp} />}
  

     </View>
     <TouchableOpacity 
     onPress={this._pickImage} style={styles.btn}>
      <Text style={styles.addpico}>Choose photo</Text>
     </TouchableOpacity>

      <TextInput style={styles.write}
       placeholder='write price'
       onChangeText={(price)=>this.setState({price})}
       value={this.state.price}/>

     <TextInput style={styles.write}
       onChangeText={(pname)=>this.setState({pname})}
       value={this.state.pname}
      placeholder='Product name'/>
      

  </View>
);

}

_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
});

      console.log(result);

      if (!result.cancelled) {
        this.setState({
          photo: result.uri
        });
      }

}
//end of image picker

upload = ()=>{
//alert();
this.setState({pname:this.state.pname});
this.setState({photo:this.state.photo});

 const ProductName = this.state.pname;
 const photo = this.state.photo;

 //console.log("somehting".photo);
 //alert("somehting".ProductName);

 //let localUri = photo.uri;
 const Mydata = new FormData();
  Mydata.append('file', photo);
  axios({
    method:'post',
    url: 'https://sizoni.000webhostapp.com/sell/upload.php',
    data:Mydata

  }).then(res=>{
    console.log(res);
    let RESI = JSON.stringify(res);
    console.log(RESI);
    alert(RESI);
  }).catch(error=>{
    let ERRR= JSON.stringify(error);
    console.log(ERRR);
  })

}
//end of upload function

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,

},
addpico:{
fontSize:15,
textAlign:‘center’,
flex:1,
},
btn:{
width:‘100%’,
height:40,
textAlign:‘center’,
marginTop:14,
marginBottom:5,
backgroundColor:’#fff’,
color:’#333745’,
},
imageUp:{

 width:'97%',
 height:211,
 marginLeft:3,
 zIndex:3,
 marginTop:4,

},
closex:{
width:100,
height:100,
borderRadius:20,
marginTop:6,
marginLeft:‘80%’,
position:‘absolute’,
top:20,
left:40,
marginLeft:‘25%’,
marginTop:50,
zIndex:9,

},
closetext:{

},
write:{
width:‘80%’,
height:50,
marginLeft:‘10%’,
borderBottomWidth:1,
borderBottomColor:’#eee’,
color:’#eee’,
paddingTop:8,
fontSize:16,
color:’#333745’,
marginTop:18,

},
postleft:{
fontSize:15,
fontWeight:‘bold’,
color:’#ff7000’,
/* position:‘relative’,
right:20,
top:40,*/
},
opp:{
width:200,
height:50,
backgroundColor:’#ccc’,
position:‘absolute’,
right:20,
top:40,

},
photobox:{
width:‘80%’,
height:220,
backgroundColor:’#fff’,
marginLeft:‘10%’,
marginTop:100,
shadowColor: ‘#ccc’,
shadowOffset: { width: 4, height: 4 },
shadowOpacity: 1,
shadowRadius: 2,
elevation: 4,

},

});