Flutter – Upload files to Firebase Storage

Hi Friends,

Hope you are all well. In this post let’s see how to upload files to firebase storage from your flutter apps.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Let’s begin.

 

Code for this repo is available – here. (Leave a star to the repo if you found it helpful)

Now, just for a demonstration we’ll pick an image from the phone’s file system and try to upload it onto Firebase storage.

Since this is going to be a basic demo, I’ll remove the auth-check rule from Firebase storage (Not recommended).

one

Alright. I presume you already know how to configure firebase with your flutter app. If not then kindly watch this video once.

Now once you have done the configurations open up android -> build.gradle and add this snippet a the bottom of the file.

This is to fix a dependency error.

Now open pubspec.yaml and add the dependencies for firestore and image picker.

Now get back to main.dart. Add the code as shown below.

Here we are simply using the image_picker plugin to pick an image from the gallery and show it on our screen.

When you run the app you will see the below screen.

Screenshot_20180910-183543

Tap on the FAB

Screenshot_20180910-183656

Tap on allow to allow our app to access the gallery.

Screenshot_20180910-183708

Choose an image. That’s it. You’ll see the image on the screen.

Screenshot_20180910-183719

Alright. Now we have code to pick an image from our gallery. We need to upload this image to Firebase Storage right ?

Let’s add an upload button for that.

Open main.dart and add a button in our enableUpload() widget.

(Don’t forget to import firebase_storage as well).

I am simply creating a storage reference. (note that you can have directories in your firebase storage as any other file system and store your files under separate directories by choosing the path here in the reference).

Then I am simply uploading the file using putFile() method.

Now run the app and you’ll see the button.

Screenshot_20180910-183850

Now tap on the upload button and open firebase storage in your firebase console. You should see the image uploaded there.

(It would be a better idea to add an alert/snackbar to show when the image upload is done).

three

That’s it guys. Now though I have just uploaded an image, you could upload files of any type into firebase storage.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

 

Liked it? Take a second to support admin on Patreon!