I am trying to submit image in post api, but somehow I am not able to do it.
Currently I am using react-native-image-picker package.
On click of image selecting button, below function is being called. which is working fine.
const handleImagePicker = async (item: string) => {
const options: ImageLibraryOptions = {
mediaType: 'photo',
};
try {
const response = await launchImageLibrary(options);
if (response.didCancel) {
console.log('User cancelled image picker');
return;
}
if (response.assets && response.assets.length > 0) {
const {uri} = response.assets[0];
if (item == 'Profile') {
setSelectedProfileImage(uri);
setProfilePictureEmpty(false);
} else {
setSelectedBannerImage(uri);
}
}
} catch (error) {
console.error('Error picking image:', error);
}
};
Then, On click of submit button below function is called.
const addBusiness = async () => {
const getUserId = async () => {
try {
const userId = await AsyncStorage.getItem('id');
return userId;
} catch (error) {
return null;
}
};
if (selectedProfileImage == '') {
setProfilePictureEmpty(true);
setErrMsg(string.enter_profile_picture);
} else {
var profileImg = {
uri: selectedProfileImage,
};
var bannerImg = {
uri: selectedBannerImage,
};
const userId = await getUserId();
uploadImages(
uploadImageAPI,
businessDetails?.id,
profileImg,
bannerImg,
(response: any) => {
console.log(response)
setSecondScreenEnabled(false);
},
(error: any) => {
console.log('error', error);
},
);
}
};
here I am using custom API function. i.e., uploadImages.
Please find that function below:
export const uploadImages = async (
url,
Id,
ProfilePicture,
BannerPicture = null,
onSuccess,
onError,
) => {
const formData = new FormData();
instance.defaults.baseURL = Config.BASE_URL;
const appendImage = (image, name) => {
const { uri } = image;
const fileType = uri.split('.').pop();
formData.append(name, {
uri: uri,
type: `image/${fileType}`,
name: `${name}.${fileType}`,
});
};
formData.append('Id', Id);
if (ProfilePicture) {
appendImage(ProfilePicture, 'ProfilePicture');
}
if (BannerPicture) {
appendImage(BannerPicture, 'BannerPicture');
}
try {
const authToken = await getAuthToken();
const config = {
headers: {
'Content-Type': 'multipart/form-data',
},
};
if (authToken) {
config.headers.Authorization = `Bearer ${authToken}`;
}
console.log('FormData:', formData);
instance
.put(url, formData, config)
.then(function (response) {
onSuccess(response.data);
})
.catch(function (error) {
onError(error);
});
const response = await instance.put(url, formData, config);
onSuccess(response.data);
} catch (error) {
if (error.response) {
console.error('Response error:', error.response.data);
console.error('Response status:', error.response.status);
console.error('Response headers:', error.response.headers);
} else if (error.request) {
console.error('Request error:', error.request);
} else {
console.error('Error:', error.message);
}
onError(error);
}
};
I am getting below error while submitting the image.
Request error: {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json", "authorization": "my_token"_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "my_url", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 60000, "upload": {}, "withCredentials": true}
If anyone had face this thing and solved it then please help me out.
Thanks in advance 🙂