react-native app and RapidAPI - AI Picture Colorizer

Question

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.

score 1 · Accepted Answer · answered Sep 15 '21 at 21:42

1

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.

answered Sep 15 '21 at 21:42

Pratham

497
3
7

response.data is undefined but `response.assets[0]` shows me the uri value which I tried to use but still received a 500 status code. Switching to the [https://rapidapi.com/sensorai-sensorai-default/api/image-colorization1/](Image Colorization) API you linked works better but passing in a uri like file:///data/user/0/com.colorizationai/cache/rn_image_picker_lib_temp_44c7b9c3-18c1-4a18-b61f-5dcd5f5cefcb.jpg fails with status code 411. Using a hard coded uri of a public image on the web works though. Do you think it has something to do with the temp file uri i get from image-picker? – Jacob Sherwood Sep 16 '21 at 01:33
actually changing the post with the [Image Colorization API](https://rapidapi.com/sensorai-sensorai-default/api/image-colorization1/) to be base64 instead of uri made it work. I'll go ahead and upvote this since it got me headed in the right direction... away from that other API – Jacob Sherwood Sep 16 '21 at 04:15

react-native app and RapidAPI - AI Picture Colorizer

1 Answers1