I'm using react native class component. I'm trying to pick an image from gallery and post it to API. But it only works in my second try.
When I pick image from gallery it says:
Fetch Error: [Type error: Network request failed].
I got 'success' alert at my second request, but never works on first try. Here is some parts of my code:
openImagePicker = () => {
const options = {
mediaType: 'photo',
};
launchImageLibrary(options, async (response) => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('Image picker error: ', response.error);
} else {
console.log('Image picker Worked: ', response.message);
let imageUri = response.uri || response.assets?.[0]?.uri;
let fileType = response.type || 'image/jpeg';
let fileName = response.fileName || 'image.jpg';
this.setState({ files: imageUri },
() => { console.log('files138:', this.state.files) }
);
const formData = new FormData();
formData.append('files', {
uri: imageUri,
type: fileType,
name: fileName,
});
fetch(config.restApi+'upload/advert/tr', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + clientData.sessionHash
},
body: formData,
})
.then((response) => response.json())
.then(responseData => {
switch (responseData.status) {
case 200: {
Alert.alert('Success');
}
break;
case 203: {
Alert.alert('203');
}
break;
default: {
Alert.alert('Alert Error');
}
break;
}
})
.catch(error => {
console.error('Fetch error:', error);
});
}
});
};
case 3:
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
{this.state.files && (
<Image
source={{ uri: this.state.files }}
style={{ flex: 1 }}
resizeMode="contain"
/>
)}
<View style={{ marginTop: 20 }}>
<Button title="Choose from Device" onPress={this.openImagePicker} />
</View>
</View>
);