Image upload base64 to server: React Native

Hello everyone.

I am Cherif, a senior RN developer and a QA consultant.

When i started Learning RN, and really started to know how great it is, I figured that it was a great idea to start with a social media app relying on uploading images to servers just like instagram.

It sounded as a simple idea that time. But i was stuck at the first use-case which is uploading images to server. So if you’re a beginner with RN today i’m going to help you with this issue.

First of all, before uploading images to server, we have to upload them to the app, to do so there’s a very popular library called react-native-image-picker.
To install it just run on the root of your project:

-npm install react-native-image-picker
-react-native link react-native-image-picker

Usage

import ImagePicker from 'react-native-image-picker';

// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info in the API Reference)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    const source = { uri: response.uri };

    // You can also display the image using data:
    // const source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source,
    });
  }
});

Converting to base64

The most simple way to send an image to server is the send it’s base64 shape.
And here’s where things gets complicated. There’s no specific library on react native which provide us a simply usable base64 coded files, that’s why we’re going to use a trick to make it work.

Here’s the state that we recovered from react-native-image-picker.
so to do construct a nice base64 we just add “data:image/jpeg;base64,”
before the code that we got in our state.

const image= "data:image/jpeg;base64," + this.state.source

finally here’s a simple function that send a base64 coded image that we constructed to dbaretna.com api.

export function sendImages(image) {
  const url = "http://www.dbaretna.com/api/base64/img";
return fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      img: image
    })
  }).catch(error => {
    console.warn(error);
  });
}

Thank you for your time.
I hope this may help, if you have any question feel free to comment or to contact me via my email:
Cherifmezdarii@gmail.com
Linkedin: https://www.linkedin.com/in/ch%C3%A9rif-mezdari/