Upload Image from React-Native Application to Node.Js Server

I sure you will not get bored/unsatisfied after read this artical,

let start..!

to do this we need 2 libraries in our React-Native App,

rn-fetch-blob

run this command ==> “npm install — save rn-fetch-blob”

For 0.29.2+ projects, simply link native packages via the following command (note: rnpm has been merged into react-native)

react-native link rn-fetch-blob

you can also check out the library by click on given link

https://www.npmjs.com/package/rn-fetch-blob

React Native Image Picker

run this command ==> “npm i react-native-image-picker”

# RN < 0.60
react-native link react-native-image-picker

you can also check out the library by click on given link

react-native-image-picker

step-2

you can also check out the permission queries on official library rn-fetch-blob

Grant Permission to External storage for Android 5.0 or lower

The mechanism for granting Android permissions has slightly different since Android 6.0 released, please refer to Official Document.

If you’re going to access external storage (say, SD card storage) for Android 5.0 (or lower) devices, you might have to add the following line to AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnfetchblobtest"
android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+   <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
...

Also, if you’re going to use Android Download Manager you have to add this to AndroidManifest.xml

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
+           <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>

If you are going to use the wifiOnly flag, you need to add this to AndroidManifest.xml

+   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
...

step-3

use image picker to select image from storage,

you can also send/select video by image picker library

Final-step

by using RNFetchBlob.Fetch method you can send image with data in form-data, the 1 line show that you will give path to RNFetchBlob.wrap function which is you will get from image picker response , and the 2 line show that you can send data with image will get in req.files.info in server and you have to json.parse (req.files.info).

in end you will get the whole object on server . thank you hope this will help you