I try to send multi selected image and upload them to server. I can use react-native-image-picker to select one image and transfer this to base64 and save on state after that send it to the server. but I want multi-select from the gallery and to send them to server . may anyone help me to do that? first, how can I select the multi image and save data of that image to state? second, how can I send that state to save PHP server? third how to show that to the client in the app? in below you can see my cod. thanks
import React, { Component } from 'react';
import { StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image, TextInput, Alert } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import {
handleAndroidBackButton,
removeAndroidBackButtonHandler
} from '../component/androidBackButton';
import RNFetchBlob from 'rn-fetch-blob';
import { ScrollView } from 'react-native-gesture-handler';
class testImage extends Component {
constructor(props) {
super(props);
this.state = {
ImageSource1: null,
ImageSource2: null,
ImageSource3: null,
data: [],
Image_TAG: ''
};
}
componentDidMount() {
handleAndroidBackButton(() => { this.props.navigation.navigate('AuthLoading') });
}
componentWillUnmount() {
removeAndroidBackButtonHandler();
}
selectPhotoTapped(num) {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = { uri: response.uri };
switch (num) {
case '1':
this.setState({
ImageSource1: source,
data: [...this.state.data, response.data],
});
break;
case '2':
this.setState({
ImageSource2: source,
data: [...this.state.data, response.data],
});
break;
case '3':
this.setState({
ImageSource3: source,
data: [...this.state.data, response.data],
});
break;
default:
break;
}
}
});
}
uploadImageToServer2 = () => {
alert(this.state.data)
}
uploadImageToServer = () => {
RNFetchBlob.fetch('POST', 'http://192.168.2.102/Project/upload_image.php', {
Authorization: "Bearer access-token",
otherHeader: "foo",
'Content-Type': 'multipart/form-data',
}, [
{ name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data[0] },
{ name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data[1] },
{ name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data[2] },
{ name: 'image_tag', data: this.state.Image_TAG }
]).then((resp) => {
var tempMSG = resp.data;
tempMSG = tempMSG.replace(/^"|"$/g, '');
Alert.alert(tempMSG);
}).catch((err) => {
// ...
})
}
render() {
return (
<ScrollView>
<View style={styles.container}>
<TouchableOpacity onPress={()=>this.selectPhotoTapped('1')}>
<View style={styles.ImageContainer}>
{this.state.ImageSource1 === null ? <Text>Select a Photo</Text> :
<Image style={styles.ImageContainer} source={this.state.ImageSource1} />
}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.selectPhotoTapped('2')}>
<View style={styles.ImageContainer}>
{this.state.ImageSource2 === null ? <Text>Select a Photo</Text> :
<Image style={styles.ImageContainer} source={this.state.ImageSource2} />
}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.selectPhotoTapped('3')}>
<View style={styles.ImageContainer}>
{this.state.ImageSource3 === null ? <Text>Select a Photo</Text> :
<Image style={styles.ImageContainer} source={this.state.ImageSource3} />
}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.uploadImageToServer2()} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> U2242D IMAGE TO SERVER </Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.uploadImageToServer} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> UPLOAD IMAGE TO SERVER </Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
export default testImage;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#FFF8E1',
paddingTop: 20
},
ImageContainer: {
borderRadius: 10,
width: 250,
height: 250,
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#CDDC39',
},
TextInputStyle: {
textAlign: 'center',
height: 40,
width: '80%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#028b53',
marginTop: 20
},
button: {
width: '80%',
backgroundColor: '#00BCD4',
borderRadius: 7,
marginTop: 20
},
TextStyle: {
color: '#fff',
textAlign: 'center',
padding: 10
}
});
