How to upload files to Firebase Storage in Flutter

Kavit (zenwraight)

Published in

techie

4 min readApr 7, 2022

If you guys like to watch the implementation walkthrough, here is a video tutorial:-

What is Firebase Storage?

Just like the above image, Firebase provides us with a storage mechanism, where we can create different buckets (in short rooms) to store a different variety of items. For example:- One bucket can be used to store cat images, another bucket can be to store dog images. In short, you can store any kind of file onto Firebase storage.

Why do we need to use Firebase Storage?

Because Firebase Cloud Storage is a powerful yet easy-to-use tool for storing all sorts of objects. We can store images, audio, video, and other types of user content.

After a small introduction about Firebase Storage, let’s jump onto the main idea behind our article today, we will be looking into how one can integrate Flutter with Firebase storage and upload files onto the cloud.

What are the things we need to get started?

Gmail account.
Basic knowledge of Flutter.
Familiarity with Flutter and how its dependencies work.
A Firebase integrated Flutter project. If not follow this link to add Firebase to your app: adding Firebase

Ok now without wasting any more time, let’s get onto the topic.

The goal of this tutorial is to illustrate how to upload an image file to Firebase Storage and Cloud Firestore. First, we will upload an image from the assets folder to Firebase Storage, then we will upload the images to Cloud Firestore.

Adding Dependencies

We need to include the following dependencies in pubspec.yaml file before we can work with Firebase storage and cloud Firestore.

dependencies:
  firebase_core: ^1.0.3  
  firebase_storage: ^8.0.3  
  cloud_firestore: ^3.1.10

After adding dependencies save (ctrl + s)and run flutter pub get in your flutter project directory.

Also, add the following in pubspec.yaml file

assets:    
  - assets/images/

Adding Images to the Assets Folder

To add images, we will need to add them to our assets folder after adding dependencies. For that purpose, we will need to create the assets folder. You can add images by drag and drop the images into the assets folder or simply copy-paste the images.

The images that I used in this tutorial can be found here:- Images

Setting Rules for Firebase Storage

Firebase Storage

After setting up images, let’s work on the Firebase console. In your Firebase console navigate to the Firebase Storage tab. Inside storage, navigate to the Rules tab and replace rules with the below Rules:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Note: Above rule indicates that anyone can read and write data to your storage, because we give access to all by adding allow read, write: if true; . Except for testing purposes, it’s not a secure method to handle your storage, you have to modify the line of code to grant read access only to all except the owner of the code.

To explore more about Firebase secure Rules: follow this link

Coding Logic

Now, that our dependency part is taken care of, we will go ahead and add our _addImages() method.

Let’s go over each line in detail:-

On Line 2, we create an instance variable for FirebaseStorage.
From Line 4 to Line 10, we create a list containing all the images that we have stored in our application.
Line 12 onwards, we loop through each item in the array and then we try to upload it to the Firebase storage and then write an entry in cloud Firestore.
On Line 13 and Line 15, we get name of the image and path of the image respectively.
In this step, we are going to get the temporary system directory of our assets folder. A temporary directory is a directory that stores our app data on our devices for one session. For loading an image, we will use a predefined tool called rootBudle. The rootBundle contains the resources that were packaged with the application when it was built. By using the rootbundle, load an image as indicated in lines 17 and 18. After loading images, let’s convert images into bytes using the writeAsBytes method as indicated on line 21.
After the above step, on Line 23, we upload the files to Firebase storage.