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 ‘com.android.tools.build:gradle:2.2.+’ on previous line.

3. Now open YourReactNativeProjectFolder/android/gradle/wrapper/gradle-wrapper.properties file and replace previous distributionUrl line to this distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip  .Below is the complete source code of gradle-wrapper.properties 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 :

Screenshots:

Upload Image to Server using PHP MySQL iOS Android Tutorial

68 Comments

  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”
    Error:
    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: https://offnear.com/FlowerList.php while entering this path on browser i am getting the json out put . but i replaced https://reactnativecode.000webhostapp.com/FlowersList.php 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.

    Thanks

  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

    code:

    • 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\://services.gradle.org/distributions/gradle-4.10.2-all.zip 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

Leave a Reply

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