Upload Image to Firebase Storage - Flutter (Android & Ios)

Written by mouli150388 on Jan 31st, 2021 ・ Views ・ Report Post

mouli150388 Visit User Profile

How to upload images to Firebase storage in Flutter.

We can pick Image from Gallery or Capture image from Camera and upload it into Firebase.

Let's get started

Step 1: Create a Flutter application

Step 2: Configure Firebase application

Check the post how to configure Flutter application with Firebase

Step 3: Add require dependencies in pubspec.yaml file

dependencies:
  firebase_storage: ^3.0.8
  firebase_core: ^0.4.0+9
  firebase_analytics: ^5.0.6
  image_picker:

Step 4:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

How to pick Image from Camera or Gallery, Check PickImage From Gallery tutorial


final picker = ImagePicker();

 Future pickImage() async {
   final pickedFile = await picker.getImage(source: ImageSource.camera);

   setState(() {
     _imageFile = File(pickedFile.path);
   });
 }

Step 5: Uploading Image to FirebaseStorage

Once an image is selected using ImagePicker, it will be displayed in the screen. Clicking on 'Upload Image' button on screen will upload the image to Firebase Storage. Make sure that FirebaseStorage write rules are configured appropriately. I'm temporarily enabling write access on FirebaseStorage access using allow write: if true;. Make sure to disable it once you've confirmed the functionality.

The following code will take the image file on device and upload it to the uploads folder in the FirebaseStorage

File _imageFile;


  Future uploadImageToFirebase(BuildContext context) async {
    String fileName = basename(_imageFile.path);
    StorageReference firebaseStorageRef =
        FirebaseStorage.instance.ref().child('uploads/$fileName');
    StorageUploadTask uploadTask = firebaseStorageRef.putFile(_imageFile);
    StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
    taskSnapshot.ref.getDownloadURL().then(
          (value) => print("Done: $value"),
        );
  }

iOS configuration

Add permissions in iOS Info.list

<key>NSCameraUsageDescription</key>
<string>Need to access your camera to capture a photo add and update profile picture.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to access your photo library to select a photo add and update profile picture</string>

Read More Upload Image to Firebase flutter example

Comments (0)