React Native and PHP - How to upload image to web server
React Native and PHP - How to upload image to web server

Hi everyone, In this article we are going to talk about how can we upload some images to the web server using React Native and PHP web service.

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:

Now we have imported the necessary library we can work with the plugin. First we need to open our image picker with the openPicker method. In this functions parameter we need to set the width and height parameters. Also we need to specify if we want to enable image cropping. Now let’s take a look at how can we do this:

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:

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:

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:

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here