With Firebase SDK, we can easily integrate and set up Cloud Storage for Firebase in our application.

To set up Cloud Storage, you will need the URL of the Storage bucket, which you can get from our Firebase Console. You can get it from the Files tab of Storage menu, as illustrated:

Once you get it, you can add it to your Firebase config.

Consider this example:

import firebase from 'firebase';

const config = {
    apiKey: "AIzaSyDO1VEnd5VmWd2OWQ9NQkkkkh-ehNXcoPTy-w",
    authDomain: "demoproject-7cc0d.firebaseapp.com",
    databaseURL: "https://demoproject-7cc0d.firebaseio.com",
    projectId: "demoproject-7cc0d",
    storageBucket: "gs://demoproject-7cc0d.appspot.com",
    messagingSenderId: "41428255555"
};

export const firebaseApp = firebase.initializeApp(config);

// Get a reference to the storage service,
var storage = firebase.storage();

Now we are ready to use Cloud storage. Now we need to create a reference, which can be used to navigate through the file hierarchy.

We can get a reference by calling a ref() method, like this:

var storage = firebase.storage();

You can also create a reference to a specific lower node in a tree. For example, to get a reference to images/homepage.png, we can write something like this:

var homepageRef = storageRef.child('images/homepage.jpg');

You can also navigate to upper or lower level in a file hierarchy:

// move to the parent of a reference - refers to images
var imagesRef = homepageRef.parent;

//move to highest parent or top of the bucket
var rootRef = homepageRef.root;

//chaining can be done for root, parent and child for multiple times
homepageRef.parent.child('test.jpg');

Three properties—fullPath, name, and bucket—are available with references to better understand the files that references are a point to:

// File path is 'images/homepage.jpg'
var path = homepageRef.fullPath

// File name is 'homepage.jpg'
var name = homepageRef.name

// Points to 'images'
var imagesRef = homepageRef.parent;

Now we are ready for the upload functionality. We will extend our HelpDesk application and give the user a functionality to upload the screenshot along with other details of the ticket. We will store the uploaded picture in Cloud storage for Firebase and retrieve it from there only.