How to upload files in React Native

A complete guide on how to handle multipart requests in React Native

Photo by Fotis Fotopoulos on Unsplash

RNFetchBlob is a library whose purpose is to make our lives as React Native developers easier when dealing with transferring binary data.

In order to install it, run

npm install --save rn-fetch-blob

or

yarn add rn-fetch-blob

in your terminal.

Then go to your ios directory and run pod install .

In this article, we are going to look into uploading files. No worries, there’ll be a different one that will look into downloading files to the device.

The record object contains the basic info about the file that is to be uploaded:

export interface MedicalRecord {
  description: string;
  file: File;
}
export interface PatientFile {
  name: string;
  url: string; // the path to the local file
  size: number;
}

Pretty straightforward, right?

Let’s break down the snippet:

Your backend will probably require some form of authorization. You’ll provide it by the means of the headers parameter. In the above snippet, defaultHeaders builds a map that will contain, for example, the Authorization field (Bearer …). It is also very important to signal to your backend that this request is multipart. This is the purpose of line 8:

headers[‘Content-Type’] = ‘multipart/form-data’;

2. Depending on the platform, the path needs to be constructed differently. Android will be able to understand the path that’s returned by the file picking library, but iOS adds a little bit of spice:

decodeURIComponent(record.file.url.replace('file://', ''))

3. Your multipartParams list will contain 2 objects:

• the first one will provide the file itself: