Upload Files Using React Native and Firebase (Part 3)
Tags: reactnative, javascript, firebase, webdev
Published: 2020-01-17 12:53:14

---
title: Upload Files Using React Native and Firebase (Part 3)
published: true
description: Upload files to your Firebase Storage bucket
tags: reactnative, javascript, firebase, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h46fgvk3tsymeql2ztm8.jpg
---

Originally published in Medium.

{% medium https://medium.com/better-programming/upload-files-using-react-native-and-firebase-part-3-8723f40fa0a4 %}

# Overview

Welcome to part 3 of this series. If you did not follow through the previous parts, consider reading them before starting here.

* In [part 1] (https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-1-a7h), we learned how to add and configure Firebase to your React Native project.

* In [part 2] (https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-2-571o), we learned how to add react-native-image-picker and learned how to set Firebase Storage rules.

* In this part, we will learn step-by-step how to upload files from our device’s library and save them into a Firebase Storage bucket.

You can find the full source code in my [Github](https://github.com/yhenni1989/jarvis).

Let’s jump right into it.

# 1. Add Firebase Storage

Start by adding the Firebase Storage module. This module depends on `@react-native-firebase/app` which you installed in [part 1] (https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-1-a7h).

```
yarn add @react-native-firebase/storage
```

You need to add this new dependency for iOS.

```
cd ios
pod install
```

There is no additional configuration for Android.

You need to rebuild the apps in the simulators for iOS and Android. Kill your metro bundler and re-run the project.

```
npx react-native run-ios
npx react-native run-android
```

Add the following code to create a new storage instance in `utils/index.js`.

```react
import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

```

# 2. Test Firebase Storage Integration With React Native

Time to test the integration of Firebase Storage with your React Native app.

Add the following code to `components/UploadFile/index.js`.

```react
// ..
import { imagePickerOptions, FireBaseStorage } from '../../utils';
const UploadFile = () => {
  // ..
  return (
    <Container>
      
      {alert(JSON.stringify(FireBaseStorage))}

    </Container>
  );
};
```

In the above, you imported the `FireBaseStorage` and will render its output using the `alert` function.

Refresh your simulator. You should see a pop-up alert containing your Firebase Storage application details.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hfwalpprhxuzrjup3i9d.png)

# 3. Upload files to Firebase Storage bucket

As seen in part 2, Image Picker returns a response object with a parameter that points to the location of the file in the device. This parameter is named `uri` in iOS and `path` in Android.

Following this observation, you will need a simple three-step process in order to upload files to a Firebase Storage bucket.

* Get the local path for the file from the device: iOS vs. Android.

* Attach a storage reference to the file for Firebase Storage.

* Upload the file in the Firebase Storage bucket.

### 3.1. Get the local file source path

Start by adding the logic for step one. Add the following function in `utils/index.js`.

```react
import { Platform } from 'react-native';

export const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};
```
The above function destructures the `path` and `uri` parameters from the response object of Image Picker, then it returns one of these parameters depending on the platform (iOS or Android) using Platform from React Native.

You can now test the output of `getFileLocalPath`.

To do so, add `getFileLocalPath` to the imports in `UploadFile/index.js`.

```react
import { imagePickerOptions, getFileLocalPath } from '../../utils';
```

Then, inside the `uploadFile` function add the following console log.

```javascript
const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(getFileLocalPath(response));
    }
  });
};
```

Make sure you enable debug mode and then refresh the simulator. Then press the `New Post` button to add a new photo. You should see the file source logged in your `Chrome Dev Console`.

### 3.2. Attach a storage reference to the file

Your files are stored in the bucket. The files are presented in a hierarchical structure, just like the file system on your local hard disk.

By creating a reference to a file, your app gains access to it. More info on references in the [Firebase docs] (https://firebase.google.com/docs/storage/ios/create-reference).

Add the following function in `utils/index.js`.

```javascript
export const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};
```

The `createStorageReferenceToFile` function destructures the `fileName` from the Image Picker response. Then it returns a storage reference using `FireBaseStorage.ref()`.

You can look at the output of the above function in the `Chrome Dev Console`. First, import `createStorageReferenceToFile` in `UploadFile/index.js`.

```javascript
import { imagePickerOptions, createStorageReferenceToFile } from '../../utils';
```

Then, inside the `uploadFile` function add the following console log.

```react
onst uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
    }
  });
};
```

Refresh the simulator and add a new photo. You should see the storage reference logged in your `Chrome Dev Console`.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6gf6j1n9licu4myyrn3g.png)

### 3.3. Upload a file to the Firebase Storage bucket

This is the last step to send the file to your Firebase Storage bucket.
Add the following function in `utils/index.js`.

```javascript
export const uploadFileToFireBase = imagePickerResponse => {
  const fileSource = getFileLocalPath(imagePickerResponse);
  const storageRef = createStorageReferenceToFile(imagePickerResponse);
  return storageRef.putFile(fileSource);
};
```

The above function incorporates the two previous functions (i.e. `getFileLocalPath` and `createStorageReferenceToFile`) to create the file path and the storage reference respectively.

Then, it sends the file to Firebase Storage using the `putFile` method. More on `putFile` in the official [Firebase docs] (https://firebase.google.com/docs/storage/android/upload-files).

The final code in your `utils/index.js` should now look like this.

```react
import { Platform } from 'react-native';

import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

export const imagePickerOptions = {
  noData: true,
};

const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};

const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};

export const uploadFileToFireBase = response => {
  const fileSource = getFileLocalPath(response);
  const storageRef = createStorageReferenceToFile(response);
  return storageRef.putFile(fileSource);
};
```

Import `uploadFileToFireBase` in `UploadFile/index.js`.

```javascript
import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
```

Then add the following lines of code inside the `uploadFile` function.

```react
const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      // Remove this
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
      // Add this
      Promise.resolve(uploadFileToFireBase(response));

    }
  });
};
```

`uploadFileToFirebase` returns a [JavaScript Promise] (https://www.youtube.com/watch?v=DHvZLI7Db8E) through `putFile`. All we had to do is resolve it and return the result.

The final code in your `UploadFile/index.js` should now look like this.

```react
import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';

import ImagePicker from 'react-native-image-picker';

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

const UploadFile = () => {
  const [imageURI, setImageURI] = useState(null);


  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        setImageURI({ uri: downloadURL });
        Promise.resolve(uploadFileToFireBase(imagePickerResponse))
      }
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
      {imageURI && <Picture source={imageURI} />}
    </Container>
  );
};

export default UploadFile;
```

Time to test the file upload to Firebase Storage. Refresh your simulator.

Then press `New Post` to add a new photo.

Go to your Firebase Console. In the left tab bar, click on the `Storage` tab. You should see the photo saved in the Files tab (figure below).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q10jym386dq1ts5gttm2.png)

Et Voila.

# Conclusion

In this article, you added Firebase Storage and integrated it with your React Native app. You then followed a three-step process to get the local path of the file, created a storage reference for it, and uploaded it to Firebase Storage.

The next part is a super cool bonus. I will show you how to track the upload progress of your photo, display a progress bar on the screen, and retrieve the photo stored in your bucket. You can read part 4 in [here] (https://dev.to/younesh1989/upload-files-using-react-native-and-firebase-part-4-3khg).