React Native image upload - reactjs

Question

I am having an issue with uploading an image from my camera roll or to my API. here is the code that I am currently using. I am able to get the image data from both the camera roll and camera. I just am having an issue of posting the data to the server. I don't know where I am getting confused.
import React, { Component } from 'react';
import {
Text,
View,
PixelRatio,
TouchableOpacity,
Image,
Platform,
NativeModules,
DeviceEventEmitter
} from 'react-native';
import { connect } from 'react-redux';
import ImagePicker from 'react-native-image-picker';
import { captureProflieAvitar } from '../../actions';
var RNUploader = NativeModules.RNUploader;
class NewCamera extends Component {
state = {
avatarSource: null,
imgBase64: []
}
componentDidMount() {
// upload progress
DeviceEventEmitter.addListener('RNUploaderProgress', (data) => {
const bytesWritten = data.totalBytesWritten;
const bytesTotal = data.totalBytesExpectedToWrite;
const progress = data.progress;
console.log(bytesWritten, bytesTotal);
console.log( "upload progress: " + progress + "%");
});
}
selectPhotoTapped() {
const options = {
quality: 0.75,
maxWidth: 300,
maxHeight: 300,
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;
// You can display the image using either:
source = { uri: 'data:image/jpeg;base64,' + response.data, isStatic: true };
const temp = response.data;
//Or:
if (Platform.OS === 'android') {
source = { uri: response.uri, isStatic: true };
} else {
source = { uri: response.uri.replace('file://', ''), isStatic: true };
}
this.setState({
avatarSource: source,
imgBase64: temp,
});
}
});
}
doUpload() {
const files = {
filepath: `data:image/png;base64,${this.state.imgBase64}`,
};
const opts = {
url: 'https://central.tipflip.co?apior=MYAPIKEY&tfReqID3031&tfUserID=1&tfImage=',
files,
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
};
RNUploader.upload(opts, (err, response) => {
if (err) {
console.log(err);
return;
}
const status = response.status;
const responseString = response.data;
const json = JSON.parse(responseString);
console.log('upload complete with status ' + status);
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={[styles.avatar, styles.avatarContainer, { marginBottom: 20 }]}>
{ this.state.avatarSource === null ? <Text>Select a Photo</Text> :
<Image style={styles.avatar} source={this.state.avatarSource} />
}
</View>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: 'yellow',
width: 60,
height: 20,
marginTop: 20,
justifyContent: 'center',
alignItems: 'center' }}
onPress={this.doUpload.bind(this)}
>
<Text>Upload</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: 'yellow',
width: 60,
height: 20,
marginTop: 20,
justifyContent: 'center',
alignItems: 'center'
}} onPress={this.props.cancel}
>
<Text>Cancel</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = {
container: {
justifyContent: 'center',
alignItems: 'center'
},
avatarContainer: {
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center'
},
avatar: {
borderRadius: 75,
width: 150,
height: 150
}
};
export default connect(null, { captureProflieAvitar })(NewCamera);

Answer 1

Here is example to upload image using Fetch API
var photo = {
uri: user.profilePicture,
type: 'image/jpeg',
name: 'photo.jpg',
};
var form = new FormData();
form.append("ProfilePicture", photo);
fetch(
Constants.API_USER + 'me/profilePicture',
{
body: form,
method: "PUT",
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + user.token
}
}
).then((response) => response.json())
.catch((error) => {
alert("ERROR " + error)
})
.then((responseData) => {
alert("Succes "+ responseData)
}).done();
Credits
https://stackoverflow.com/a/36649457/5315786

Answer 2

If anyone trying to upload an image to Laravel using React Native try this. my case i'm using react-native-image-crop-picker with Axios
//create object with uri, type, image name
var photo = {
uri: IMAGE_PATH,
type: 'image/jpeg',
name: 'photo.jpg',
};
//use formdata
var formData = new FormData();
//append created photo{} to formdata
formData.append('image', photo);
//use axios to POST
axios({
method: 'POST',
url: api_url + 'customer/upload-avatar',
data: formData,
headers: {
'Authorization': "Bearer " + YOUR_BEARER_TOKEN,
'Accept': 'application/json',
'Content-Type': 'multipart/form-data;'
}}) .then(function (response) { console.log(response)})
.catch(function (error) { console.log(error.response)
});

Answer 3

if you use react-native-image-picker and try to upload your image on laravel restful API, try this.
// create a state for temp photo
const [photo, setPhoto] = React.useState(null);
// create a function to set a temp photo
const handleChoosePhoto = () => {
launchImageLibrary({noData: true}, (response) => {
if (response && !response.didCancel) {
setPhoto(response);
}
});
};
// create a function to post your temp photo through api
const setData = () => {
const formData = new FormData();
if (photo) {
const tempPhoto = {
uri: photo?.assets[0]?.uri,
type: photo?.assets[0]?.type,
name: photo?.assets[0]?.fileName,
};
formData.append('avatar', tempPhoto);
axios({
method: 'POST',
url: api_url + 'api/upload-avatar',
data: formData,
headers: {
'Authorization': "Bearer " + YOUR_BEARER_TOKEN,
'Accept': 'application/json',
'Content-Type': 'multipart/form-data;'
}})
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error.response)
});
}
}