I'm working through this Udemy react-native course and finding it to be a bit outdated.

The course section 9 works with the RapidAPI AI Picture Colorizer to select a base64 encoded image. But it looks like the API was updated to no longer use base64 and instead uses a image upload.

I'm using react-native-imagepicker and I'm not sure how to update the code to pick an image from the device's library and upload the way the RapidAPI documentation reads.

This is the RapidAPI example code:

import axios from "axios";

const form = new FormData();
form.append("image", "");
form.append("renderFactor", "25");

const options = {
  method: 'POST',
  url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
  headers: {
    'content-type': 'multipart/form-data; boundary=---011000010111000001101001',
    'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
    'x-rapidapi-key': '[MY-API-KEY]'
  },
  data: '[form]'
};

axios.request(options).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});

This is my code:

import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {Button} from 'react-native-elements';
import ProgressBar from 'react-native-progress/Bar';
import {launchImageLibrary} from 'react-native-image-picker';
import axios from 'axios';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menu: true,
      dataSource: null,
      loading: true,
      base64: null,
      fileName: null,
    };
  }

selectGallaryImage() {
    const options = {
      includeBase64: true,
    };
    launchImageLibrary(options, response => {
      if (response.didCancel) {
        console.log('User canceled Image');
      } else if (response.error) {
        console.log('Image picker error');
      } else if (response.customButton) {
        console.log('User pressed custom Button');
      } else {
        this.setState(
          {
            base64: response.assets[0].base64,
            fileName: response.assets[0].fileName,
          },
          () => console.log('base64 fileName ', this.state.fileName),
        );
        this.goForAxios();
      }
    });
  }


goForAxios() {
    const {fileName} = this.state;
    const form = new FormData();
    form.append('image', fileName);
    form.append('renderFactor', '10');

    this.setState({menu: false});
    console.log('Starting request');
    axios
      .request({
        method: 'POST',
        url: 'https://ai-picture-colorizer.p.rapidapi.com/colorize-api-bin-mjbcrab',
        headers: {
          'content-type':
            'multipart/form-data; boundary=---011000010111000001101001',
          'x-rapidapi-host': 'ai-picture-colorizer.p.rapidapi.com',
          'x-rapidapi-key': '[MY-API-KEY]',
        },
        data: '[form]',
      })
      .then(response => {
        this.setState({
          loading: false,
          dataSource: response.data,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

...
}

I've reached out to the API author and they suggested I refer to the RapidAPI documentation, but I can't seem to sort it out.

I keep receiving [Error: Request failed with status code 500] and running the Test Endpoint in RapidAPI returns OK but with "There's no example response for this endpoint."

Thanks for the help.

CodePudding user response：

The server usually returns a 500 status code when it cannot find any suitable status code due to unexpected situations. I'm not a React Native expert, but here to help.

You're using react-native-image-picker, it already returns the Base64 value in its response. So instead of:

base64: response.assets[0].base64,

Try this

base64: response.data,

If it still does not work, you can use another API that provides similar functionality. There are thousands of APIs you can find on RapidAPI Hub belonging to the same category. For example, use this Image Colorization API. It lets you pass the image as the URL.