THECODEPROGRAM

Here I will use the fetch function. I have an article about usage of fetch function. You can reach with this link. In this article we are gonna build two different programs. One of them is in PHP and it will get the image file that we send from our React Native program. The other one is our main mobile program and that will send the image to our PHP server. So I will tell the how did I did this on two part article. This is the first part of the program. In first part I will tell the React Native part and in the second part I will tell the web side with PHP.

If you want to read the second part of this article you can reach via this link: http://thecodeprogram.com/react-native-and-php---how-to-upload-image-to-web-server---part-2

Now If we are ready it is SHOW TIME :) . Lets get started to code then.

First I need to say I will use the Image Picker plugin. You can find out the library that I used. Installation instructions on the github page of the library. Here reach the link of this library.

Top of page we can import necessary library. In the below code section you can see this:

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

   ImagePicker.openPicker({
      width: VARIABLES.userImages.width,
      height: VARIABLES.userImages.height,
      cropping: true
    })

This method will return the image that we have chosen from our library. This image will also be cropped if we enabled the cropping as true. With this then function we can use this returned image variable for what we want. In this case I want to send it to a web service. Now First we need to create a then function after image got. Lets take a look at this with below code section:

ImagePicker.openPicker({
      width: VARIABLES.userImages.width,
      height: VARIABLES.userImages.height,
      cropping: true
    }).then(image => {  /* our uploading codes will be here */    });

For sending the image to the web service first we need to create a FormData() typed variable. And then append all the information about the image. Below code section shows how can we do this:

//here we created a FormData typed variable to hold 
//file and datas about it.
const data = new FormData();

//Here you can append the post datas seperate from file
data.append('id', USERINF.userId ); 
data.append('session', USERINF.userSession );

//Here we have appended the image file
//and all about image's data
data.append('fileToUpload', {
     uri: image.path,
     type: 'image/jpeg', // or photo.type
     name: 'avatar_' + USERINF.userId ,
     user_id: USERINF.userId
});

In above code section we have builded our data variable to upload via web service. Now all we need to send it with React Native's fetch() function. Below code section show how we can this:

fetch( VARIABLES.urls.upload_profile_image , 
{
    method: 'post',
    body: data
 })

We are sending data variable with post method. It means we are POSTING our datas to our web service. Here I am holding my services URL with VARIABLES.urls.upload_profile_image variable. You can hold it as you want. Now we know how can we send our pictures to the web service. I recommend you to look at the 2. part of this article for getting and uploading the sent image from mobile application. Here is the link of second part : http://thecodeprogram.com/react-native-and-php---how-to-upload-image-to-web-server---part-2

That is all for the first part.

Have a nice coding.

Burak Hamdi TUFAN - TheCodeProgram