How to upload images with react-native-image-picker to RapidAPI photo enhancement service

Other Questions RapidAPI
1

I’m having trouble connecting react-native-image-picker with a RapidAPI photo enhancement service. The API changed from base64 format to file uploads but I can’t get it working properly.

When I try to send the image I keep getting a 500 error. The API documentation shows this setup:

import axios from "axios";

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

const config = {
  method: 'POST',
  url: 'https://photo-enhancer.p.rapidapi.com/enhance-photo-endpoint',
  headers: {
    'content-type': 'multipart/form-data',
    'x-rapidapi-host': 'photo-enhancer.p.rapidapi.com',
    'x-rapidapi-key': 'YOUR_API_KEY'
  },
  data: formData
};

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

My React Native code looks like this:

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Button} from 'react-native-elements';
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,
      result: null,
      isLoading: true,
      imageData: null,
      imageName: null,
    };
  }

  pickImageFromGallery() {
    const settings = {
      includeBase64: true,
    };
    launchImageLibrary(settings, result => {
      if (result.didCancel) {
        console.log('User cancelled');
      } else if (result.error) {
        console.log('Picker error');
      } else {
        this.setState(
          {
            imageData: result.assets[0].base64,
            imageName: result.assets[0].fileName,
          },
          () => console.log('image name ', this.state.imageName),
        );
        this.sendToAPI();
      }
    });
  }

  sendToAPI() {
    const {imageName} = this.state;
    const formData = new FormData();
    formData.append('photo', imageName);
    formData.append('quality', '15');

    this.setState({showMenu: false});
    console.log('Sending request');
    axios
      .request({
        method: 'POST',
        url: 'https://photo-enhancer.p.rapidapi.com/enhance-photo-endpoint',
        headers: {
          'content-type': 'multipart/form-data',
          'x-rapidapi-host': 'photo-enhancer.p.rapidapi.com',
          'x-rapidapi-key': 'YOUR_API_KEY',
        },
        data: formData,
      })
      .then(response => {
        this.setState({
          isLoading: false,
          result: response.data,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
}

I think I’m not formatting the image data correctly for the FormData. How should I properly send the picked image to the API?

2

Your problem’s in the sendToAPI method - you’re passing just the filename string instead of the actual file data. You need to build a proper file object for FormData. Update your sendToAPI method to use the uri from the picker result:

sendToAPI() {
  const formData = new FormData();
  formData.append('photo', {
    uri: this.state.imageData.uri,
    type: 'image/jpeg', // or the actual mime type
    name: this.state.imageName
  });
  formData.append('quality', '15');
  // rest of your code
}

Also fix your picker settings to capture the uri properly and store it in state. You don’t need the base64 for file uploads - just the uri path to the image file.

3

you’re only appending the filename to formdata, but the api needs the actual file object. try this: formData.append('photo', {uri: result.assets[0].uri, type: result.assets[0].type, name: result.assets[0].fileName}); that’ll fix your 500 error.

4

Your problem is with how you’re handling the image picker response and building the FormData. You’re saving result.assets[0].base64 in imageData but then only passing the filename to FormData. Fix your pickImageFromGallery method - store the full asset object, not just the base64. Then in sendToAPI, build the file object using the uri, not the filename. Drop the includeBase64 setting too since file uploads don’t need it and it just slows things down. The API wants a file object with uri, type, and name properties - react-native-image-picker already gives you this in the assets array.