Firebase Storage in Flutter: Uploading Files

Hello. In today's post I'll explain how to upload a file from our Flutter app to Firebase Storage.

I'm assuming we've connected our app to Firebase. If you don't know how to connect it, you can read my post here. You can also watch the video where I explain these steps in detail on YouTube.

Let's imagine we have a photo on screen that we selected from the gallery. We want to upload it to Firebase Storage. The operation we need to do is actually quite simple.

From here we add the main package needed for our app to communicate with Firebase, and from here we add the package needed to perform storage operations, into our project.

If you're going to use Firebase in your app, before anything else we need to initialize Firebase.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

WidgetsFlutterBinding.ensureInitialized makes the app perform the operations needed during the startup phase and ensures our app runs stably. When we start asynchronous operations, we need to add this to the first line. Afterwards, we initialize Firebase.

Now we can use Firebase within our app. We'll upload an image we selected from the gallery to storage.

 onTap: () async {
              print('start');
              List<String> imagePathList = imagePath.split('/');
              await FirebaseStorage.instance
                  .ref('TestC')
                  .child(imagePathList[imagePathList.length - 1])
                  .putFile(File(imagePath));
              print('finish');
            },

We assigned the path value of the image we selected from the gallery to the imagePath value. If you don't know or don't remember how these operations are done, you can read my post 'How to Select a Photo from the Gallery in Flutter, Step by Step' published here.

We can explain the part we call FirebaseStorage.instance.ref() as follows. There will be a path on Firebase Storage where we'll save our files. We specify this path inside ref(). Since I want to upload to the TestC folder, I wrote ref('TestC').

The .child() that comes after ref() asks what the name of the file we'll upload will be on storage. We already know the photo we selected has a name; it's in the imagePath variable in the form xx/xx/xx/xx/photo.jpg. Since I want photo.jpg, I split this variable by the '/' characters and take the photo.jpg part.

After putting the name I'll use inside child, I choose what to put. Since I'll put a file, I write putFile(). putFile asks us for a File. We already know the image we showed on screen and selected from the gallery is a File. We place it and complete our code.

I tried to explain Firebase Storage operations with Flutter. You can find the app's source code here.

I'm thinking of generally sharing the content I create on YouTube as well. You can subscribe and follow my content here.

Happy coding, everyone.