Upload Files Using React Native and Firebase (Part 3)

Upload files to your Firebase Storage bucket

Younes Henni, PhD
Jan 10 · 6 min read
Photo by Frank McKenna on Unsplash

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 2, 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.

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.

yarn add @react-native-firebase/storage
cd ios
pod install
npx react-native run-ios
npx react-native run-android
import storage from '@react-native-firebase/storage';export const FireBaseStorage = storage();export const imagePickerOptions = {
noData: true,
};

2. Test Firebase Storage Integration With React Native

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

// ..import { imagePickerOptions, FireBaseStorage } from '../../utils';const UploadFile = () => {  // ..  return (
<Container>
//.. {alert(JSON.stringify(FireBaseStorage))}
</Container>
);
};
Testing the Firebase Storage integration with React Native

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.

  • 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.

import { Platform } from 'react-native';export const getFileLocalPath = response => {
const { path, uri } = response;
return Platform.OS === 'android' ? path : uri;
};
import { imagePickerOptions, getFileLocalPath } from '../../utils';
const uploadFile = () => {
ImagePicker.launchImageLibrary(imagePickerOptions, response => {
if (response.didCancel) {
// ..
} else {
setImageURI({ uri: response.uri });
console.log(getFileLocalPath(response));
}
});
};

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.

export const createStorageReferenceToFile = response => {
const { fileName } = response;
return FireBaseStorage.ref(fileName);
};
import { imagePickerOptions, createStorageReferenceToFile } from '../../utils';
const uploadFile = () => {
ImagePicker.launchImageLibrary(imagePickerOptions, response => {
if (response.didCancel) {
// ..
} else {
setImageURI({ uri: response.uri });
console.log(
'My file storage reference is: ',
createStorageReferenceToFile(response)
);

}
});
};
Your file has now a Firebase Storage reference as seen in the Chrome Dev Console.

3.3. Upload a file to the Firebase Storage bucket

This is the last step to send the file to your Firebase Storage bucket.

export const uploadFileToFireBase = imagePickerResponse => {
const fileSource = getFileLocalPath(imagePickerResponse);
const storageRef = createStorageReferenceToFile(imagePickerResponse);
return storageRef.putFile(fileSource);
};
All the code living in utils/index.js so far.
import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
const uploadFile = () => {
ImagePicker.launchImageLibrary(imagePickerOptions, response => {
if (response.didCancel) {
// ..
} else {
setImageURI({ uri: response.uri });
Promise.resolve(uploadFileToFireBase(response));
}
});
};
All the code living in UploadFile/index.js so far.
Firebase Storage now has your photo.

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.

Better Programming

Advice for programmers.

Younes Henni, PhD

Written by

#Physicist turned #Software #Engineer. My blogs cover #Mobile #Apps #Development #JavaScript #ReactNative #GraphQL #Serverless #Technology and #Productivity.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade