Pick local images and upload to backend with API call — React Native

local Images

If you are feeling trouble to capture an image or pick from gallery and upload it to backend with rest API.
Packages we will use in guide

react-native-camera
react-native-image-picker

I will call API with axios and fetch too. First we will look into react-native-Image-picker.

Let’s add permissions for using camera first.

Android

add following permissions to project root/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

add following permission string to project root/ios/ProjectName/Info.plist

<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>We use this permission to... (purpose)</string>


<!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>We use photo add from library for .. (purpose)</string>


<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>We use photo library for .. (purpose)</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>We use micro phone for .. (purpose)</string>

Pick Image from Image Gallery

Skip the alert dialog and launch the camera directly.

Skip the alert dialog and launch the image library directly.

At this point you have picked you image with ImagePicker from Camera or Image Gallery.

Now we will see how we can upload this image to server by calling Rest API from app side. To upload local images we will check How to use FormData for File Uploading in React Native?

  1. Create FormData by creating an object and appending the values you want to send to the server

You can append any other data that you need to send to body of API, like if you need to send what category of image it is.

formData.append('Category', 'pet');

Now let’s see how we can call API with formData, first we will see with fetch

If you prefer fetch, at this point your image should be uploaded.

Now we will look how we can use axios to call our Rest API with formData to upload Image.

Please note headers could vary, if your API is working please

"Content-Type": "application/json"

That’s it. Thank you for reading.

“Habits are critical because they build consistency and consistency is what makes you reliable.” John Sonmez

--

--

--

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introduction to state management with Ngrx and Angular

JavaScript Insights and Random Tips about web development

CORS Explained (with example)

Sequelize with Node, Express & Mysql and it’s setup

Up Your React Game With Compound Components

Computer parts on a table

How to use the hygen code generator

Typescript: builder pattern that returns corresponding result type

Exploring Long Polling, SSE, and WebSockets

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imdad Hussain

Imdad Hussain

Mobile Engineer @ Nova, React | React Native|Redux, JavaScript | TypeScript mostly Frontend | more at https://hussainimdad.web.app/

More from Medium

How’s the weather outside? Learn to integrate Site Kit in a Weather Application in React Native

React Native: View config getter callback for component

Building multi-platform React (web) and React Native (mobile) app in WSL2

Integrating Google maps with React native