How to upload images from React Native app to AI Photo Colorizer API

Other Questions RapidAPI
1

I’m trying to connect my React Native app to an image colorizing API but running into some issues. The API documentation shows it needs a multipart form upload but I can’t get it working with my image picker.

Here’s what the API docs show:

import axios from "axios";

const formData = new FormData();
formData.append("photo", "");
formData.append("quality", "30");

const config = {
  method: 'POST',
  url: 'https://photo-colorizer-api.p.rapidapi.com/process-image',
  headers: {
    'content-type': 'multipart/form-data',
    'x-rapidapi-host': 'photo-colorizer-api.p.rapidapi.com',
    'x-rapidapi-key': '[API-KEY-HERE]'
  },
  data: formData
};

axios.request(config).then(function (result) {
    console.log(result.data);
}).catch(function (err) {
    console.error(err);
});

And here’s my React Native code:

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

export default class PhotoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showMenu: true,
      resultData: null,
      isLoading: true,
      imageData: null,
      photoName: null,
    };
  }

selectPhotoFromLibrary() {
    const pickerOptions = {
      includeBase64: true,
    };
    launchImageLibrary(pickerOptions, result => {
      if (result.didCancel) {
        console.log('User cancelled photo selection');
      } else if (result.error) {
        console.log('Photo picker error occurred');
      } else if (result.customButton) {
        console.log('User clicked custom button');
      } else {
        this.setState(
          {
            imageData: result.assets[0].base64,
            photoName: result.assets[0].fileName,
          },
          () => console.log('photo name: ', this.state.photoName),
        );
        this.processImage();
      }
    });
  }

processImage() {
    const {photoName} = this.state;
    const uploadForm = new FormData();
    uploadForm.append('photo', photoName);
    uploadForm.append('quality', '15');

    this.setState({showMenu: false});
    console.log('Beginning API request');
    axios
      .request({
        method: 'POST',
        url: 'https://photo-colorizer-api.p.rapidapi.com/process-image',
        headers: {
          'content-type': 'multipart/form-data',
          'x-rapidapi-host': 'photo-colorizer-api.p.rapidapi.com',
          'x-rapidapi-key': '[API-KEY-HERE]',
        },
        data: uploadForm,
      })
      .then(response => {
        this.setState({
          isLoading: false,
          resultData: response.data,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

...
}

I keep getting a 500 error and I’m not sure what I’m doing wrong. The API test endpoint works fine but gives no example response. Any ideas on how to properly send the image file from the device gallery to this API?

2

You’re appending just the filename to FormData instead of the actual image file. When you do uploadForm.append('photo', photoName), you’re sending a string - not the binary image data the API wants.

I hit this same problem last year. You need to build a proper file object for FormData. Here’s what worked for me:

processImage() {
  const {imageData, photoName} = this.state;
  const uploadForm = new FormData();
  
  uploadForm.append('photo', {
    uri: `data:image/jpeg;base64,${imageData}`,
    type: 'image/jpeg',
    name: photoName || 'image.jpg'
  });
  uploadForm.append('quality', '15');
  
  // rest of your axios request
}

If you’ve got the file URI from your image picker, use that instead of base64. The trick is passing an object with uri, type, and name properties - not just the filename string.

3

Had this same problem a few months ago. You’re only using the base64 data but not handling the URI right. Skip the base64 and work directly with the file URI from the image picker response.

When you call launchImageLibrary, grab the URI from result.assets[0].uri. Then in your processImage function, build the FormData like this:

const uploadForm = new FormData();
uploadForm.append('photo', {
  uri: result.assets[0].uri,
  type: result.assets[0].type,
  name: result.assets[0].fileName
});

Check your API key is valid and has the right permissions too. Those 500 errors usually mean malformed requests or auth problems. Test with a lower quality setting first to rule out file size issues.

4

Check your image picker config - you’re using includeBase64 without mediaType. Add mediaType: 'photo' to your pickerOptions. That 500 error’s probably because the API wants actual file data, not a base64 string. I skip base64 entirely and just use the URI path directly in FormData.