React Native Upload Image to Server using PHP MySQL iOS Android Tutorial

Image uploading is one of the most usable functionality in react native development area because in today scenario every android and iOS application is fully dynamic and comes with Login functionality where user can set his own image as profile picture or upload images from his application. So in this tutorial we would going to create a react native application to Upload Image to Server using PHP MySQL and Store Image URL in Database so it can be accessible for further use from directly server.

What we are doing in this project : We would store the image into a folder created in our hosting server root directory and after successfully done the uploading process we would store the complete image URL(Path of Server) into MySQL database using PHP scripting language after that we would show a response message to user in react native application.

List of React Native libraries used in this project :

  1. react-native-image-picker  : To pick image form gallery or camera.
  2. rn-fetch-blob : Send selected image to server.

Contents in this project React Native Upload Image to Server using PHP MySQL-Store Image URL in Database iOS Android Example Tutorial:

1. Installing the react-native-image-picker library :

1. Before getting started we need to install the react-native-image-picker library in our current project. To install the react-native-image-picker library you need to open your react native project folder in Command Prompt or Terminal and execute below command .

2. After executing the above command it will start downloading and installing the react-native-image-picker library. Below is the screenshot of CMD after successfully install the library.

3. After installing the library we need to execute the  react-native link command , This command will refresh and re-index the complete react native project folder and index the react native image picker library in your current project.

4. Configure Project for Android devices :

1. Open build.gradle file present in your folder located in YourReactNativeProject/android.

2. Replace classpath ‘’ on previous line.

3. Now open YourReactNativeProjectFolder/android/gradle/wrapper/ file and replace previous distributionUrl line to this distributionUrl=https\://  .Below is the complete source code of file.

4. Finally Open AndroidManifest.xml file present inside YourReactNativeProjectFolder\android\app\src\main and Add CAMERA permission and WRITE_EXTERNAL_STORAGE permission. Below is the final code of AndroidManifest.xml file.

5. Configure Project for iOS devices :

1. Open YourReactNativeProject -> ios – > YourProjectName.xcodeproj file.

2. Now we need to open info.plist file from side panel, This file contain all the useful information about your project.

3. Click on the Small + Plus icon present on the top.

4. Select the Privacy – Camera Usages Description permission like i did in below screenshot.

5.  Select Privacy – Photo Library Usages permission .

6. Now we need to enter some info text in front of both permissions like i did in below screenshot so we remember what is the purpose of this permission.

2. Installing the rn-fetch-blob library :

1. Open your react native project folder in CMD and execute below command like i did in below screenshot.

2. After successfully install the library we need to execute  react-native link command in order to refresh our complete project and index the react native fetch blob library.

3.  Creating MySQL database+Table on your PhpMyAdmin Server :

1. Create a new database in your PHPMYADMIN control panel named as mydatabase .

2. Inside this database we need to make a table named as image_upload_table with 3 columns idimage_tag and image_path. See the below MySQL table screenshot to know how to set their values. This table is used to store the complete image URL with domain name and a image tag.

4.  Creating PHP Script to receive and store send image on Server and Insert image URL in MySQL database:

I have created a folder name as Project and inside the folder i have created another folder name as Uploads . So all the images will upload inside the Uploads folder.

Code for upload_image.php file:

5.  Start Coding of React Native :

1. Open your project’s App.js file.

2. Import StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image, TextInput and Alert component in your project.

3. Import ImagePicker and RNFetchBlob module from react-native-image-picker and rn-fetch-blob library .

4. Create  a class named as Project in your App.js file.

5. Create constructor() in your project folder with 3 States named as ImageSource, data and Image_TAG.

ImageSource : Used to hold the image path when we select image from gallery or capture image form camera.

data : Used to hold the selected image as object to send on sever.

Image_TAG : Used to hold the image tag, some text send with image.

6. Create two functions named as selectPhotoTapped and ImagePicker.showImagePicker , these both functions is predefined inbuilt functions of react native image picker library.

7. Create another function named as uploadImageToServer().  Inside this function we would simply use the RNFetchBlob.fetch() method to upload the selected image on our server. We are testing this application on our localhost so i am putting my IP address here.

8. Create 2 Touchable opacity component and 1 Text Input component inside render’s return block .

9. Creating Style.

10. Complete source code for App.js File :


Upload Image to Server using PHP MySQL iOS Android Tutorial


  1. Hi Admin,

    Thanks for uploading this Tutorial…..

    I have followed all steps …

    But Unfortunately getting Error while i click “Upload image to Server button”
    Rather i should get “Image uploaded Succesffully” Message
    im getting the above error message.
    Pls Help how to fix it….

  2. i am working on your tutorial
    React Native JSON FlatList with Images and Text iOS Android Tutorial
    i saved the php files in my godaddy host(public html)
    path: while entering this path on browser i am getting the json out put . but i replaced with my path .then app is not working.
    kindly please help me .

  3. in json based php backend application( flowerslist)
    can i use godaddyhosting accunt

  4. now it is working .thank you for the grate support

  5. How will I achieved this using expo, because am not seeing android folder in my project.
    I am beginner.

    Please help me out.


  6. i am getting the following error pls help Thanks!
    Cannot read property ‘showImagePicker’ of undefined

  7. Hi Admin,

    How to “Select and upload Multiple images” in one go, from Phone gallery….

  8. Hi Admin,

    Please suggest any library to select Multiple images….

  9. rnfetchblob.documentdir undefined is not an object. sir i got this error , can u help me please?

  10. manish ananda wagale

    hi i am working with this same code but i am getting error in that please help me.

    error is : Notice: Undefined index: image in C:\xampp\htdocs\FarmersPlaza\upload_image.php on line 23


    • Manish if you run this file directly this would show error because currently there is value in this variable but when you call this file from React Native app then it will show no error.

  11. How can we store the images directly to MySQL DB instead of storing it to the server and fetch it as a response and show it in our RN app?

    • Rohit you cannot store the image directly into MySQL db, you need to store the image URL in MySQL db and store image on your hosting server folder.

  12. hi, admin. How to implement crop image inside here?

  13. Thanks admin, I have one question how can I make sure that images still maintain when I go to next page and return back this page no need to upload the same image again.

  14. Hi admin, I trying and error:
    Notice: Undefined index: image_tag in /opt/lampp/htdocs/Project/upload_image.php on line 18
    error here: $img_tag = $_POST[“image_tag”];
    please tell me how to fix it? thanks

  15. Hello, I send an email.

  16. Warning: move_uploaded_file(uploads/1447882052_1556017341.jpeg): failed to open stream: No such file or directory in C:\xampp\htdocs\api\productdetail.php on line 26

    this error comes when i hit the UPLOAD IMAGE TO SERVER button

  17. move_uploaded_file() expects exactly 2 parameters, 1 given in C:\xampp\htdocs\api\productdetail.php on line 29

    actually i guess your php code has no mechanism to receive image and image_tag variable

  18. hello bro .
    please verify your php backend code .
    its not working properly

    • Abubakar its working properly i have just run it again right now, It is receiving the images properly from application. Could you tell on which platform you are testing the app like local or online ?

  19. Hello, can’t we use distributionUrl=https\:// for the image upload?

  20. Hello Admin, I sent you a mail.

  21. how to get the name of the image.
    I don’t want to write a name in that box,
    [simply get the original name of the image]

  22. Hi bro,my app doesnot working after i installed npm install react-native-image-picker —save this package.

  23. Application Crash, When I use rn-fetch-blob

    Please help me.

  24. // Receiving image sent from Application
    if(move_uploaded_file($_FILES[‘image’][‘tmp_name’], $target_dir))
    // Adding domain name with image random name.
    $target_dir = $domain_name . $target_dir ;

    Hi,This function doesn’t work bro..Help me.

  25. hi how can i upload document insted of image?

  26. uploaded image stored in local storage , but it doesnt show up in db

  27. Fatal error: Uncaught Error: Call to undefined function mysql_connect() in /storage/ssd3/137/11242137/public_html/blog/addfeed.php:15 Stack trace: #0 {main} thrown in /storage/ssd3/137/11242137/public_html/blog/addfeed.php on line 15

  28. I have also sent you an email. Please check your email.

  29. Hello I’m having error in which i’m clicking the button but not getting the alert message and data is also not getting submitted.

  30. try mysqli_* instead of mysql_connection because in php 7 or above it doesn’t support mysql_connection.

  31. hello Admin,
    I’m having the same error
    Notice: Undefined index: image_tag in C:\xampp\htdocs\image_upload\image_upload.php on line 15
    Notice: Undefined index: image_tag in C:\xampp\htdocs\image_upload\image_upload.php on line 16
    Even I’m trying to insert the data it shows alert message and i’m getting error.

  32. i need help

  33. i am getting the information and image and I am unable to send that into the server folder

  34. How can I upload images to server, which are placed within assets folder in project

  35. three days have passed and I am trying without any result, I feel very disappointed, but when he found your code he worked great.
    Really , you save my life , thanks you so mush .

  36. Hello Brother,

    I am getting this error in upload_image.php. Please help me I am new here.

    Warning: mysqli_select_db() expects parameter 1 to be mysqli, string given in C:\xampp\htdocs\Project\upload_image.php on line 17

    Notice: Undefined index: image_tag in C:\xampp\htdocs\Project\upload_image.php on line 29

    Notice: Undefined index: image in C:\xampp\htdocs\Project\upload_image.php on line 32

    Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\Project\upload_image.php on line 32

    Please help me sar.

  37. Sir how to display this uploaded images using fetch

  38. this is the error I’m getting…..” Cannot read property ‘DocumentDir’ of undefined” I don’t know if it’s because I’m using expo. please help out

  39. Hi, I get this error, can someone please help… exactly following the codes

    RNFetchBlob multipart request builder has found a field without data property, the field image will be removed implicitly.

  40. Takunda Mashinya

    hi how do you upload multiple files at the same time

  41. this exactly what i am looking for, but im getting an error like this,,
    Cannot read properties of undefine (reading “DocumentDir”)
    what should i do? pls help.
    im using expo.

Leave a Reply

Your email address will not be published. Required fields are marked *