How to upload file to Server with From Data in React native

In this article, we will learn about How to upload file to Server with From Data in React native. we are going to use React native Fetch request to send the file to the server. and we are using Form data to upload files to the server. it is better to use Form Data instead of using Third-party dependencies in the project. so in this example, we are going to select an image from the device & upload the image using FromData to the server.

How to upload file to Server with From Data in React native

  • First, we are using react-native-image-crop-picker dependency to select image from the device.
  • Save imageUri in setState.
  • Pass imageUri to Fetch request using FormData.

Let’s start with an example,

1. Create a new project

Install react-native-cli using the following command in terminal to install react-native cli

Create a new project

2. Install the following dependency

Install dependency to select an image from device

Note: You can use any other dependency for the file picker

3. Import the following components

4. Create constructor to set State

Define selectedImgaeUri in state

5. Select image URL

Here’s the function to select an image using react-native-image-crop-picker and save imageUri in the state.

6. API call to upload file

Create an async function to upload the image to the server & use fetch request with FormData to pass the image, also we have to pass the name & type of file in FormData.

7. Source code (App.js)

Thank you 🙂

 

Leave a Reply

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