I’m currently enrolled in a React Native course that seems a bit old-fashioned. In section nine, the course uses RapidAPI’s AI Picture Colorizer and originally required a base64 encoded image. However, the API has been updated to require image uploads instead. I’m trying to integrate the react-native-image-picker library in my app, but I’m uncertain about how to select an image from the device gallery and upload it according to the new API guidelines. Below is the example code from RapidAPI:
import axios from 'axios';
const formData = new FormData();
formData.append('picture', '');
formData.append('renderQuality', '25');
const config = {
method: 'POST',
url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
headers: {
'Content-Type': 'multipart/form-data',
'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
'x-rapidapi-key': '[YOUR-API-KEY]'
},
data: formData
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error(error));
Here’s what I am currently using:
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import { Button } from 'react-native-elements';
import { ProgressBar } from 'react-native-progress';
import { launchImageLibrary } from 'react-native-image-picker';
import axios from 'axios';
class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
displayMenu: true,
responseData: null,
isLoading: true,
imageBase64: null,
imageFileName: null,
};
}
selectImageFromGallery() {
const options = { includeBase64: true };
launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('Image selection canceled');
} else if (response.error) {
console.log('Error with image picker');
} else if (response.customButton) {
console.log('Custom button pressed');
} else {
this.setState({
imageBase64: response.assets[0].base64,
imageFileName: response.assets[0].fileName,
}, () => console.log('Image File Name: ', this.state.imageFileName));
this.uploadImage();
}
});
}
uploadImage() {
const { imageFileName } = this.state;
const imageData = new FormData();
imageData.append('picture', imageFileName);
imageData.append('renderQuality', '10');
this.setState({ displayMenu: false });
console.log('Initiating upload');
axios({
method: 'POST',
url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
headers: {
'Content-Type': 'multipart/form-data',
'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
'x-rapidapi-key': '[YOUR-API-KEY]',
},
data: imageData,
})
.then(response => {
this.setState({
isLoading: false,
responseData: response.data,
});
})
.catch(error => console.error(error));
}
}
I’ve contacted the API’s developer for guidance, and they directed me to the RapidAPI documentation, but I’m still facing challenges. I consistently get the error [Error: Request failed with status code 500], and when using the Test Endpoint in RapidAPI, it shows OK, but says “There’s no example response for this endpoint.” Any guidance would be appreciated.