Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to upload image to Firebase using Flutter

I am using the image_picker library https://pub.dartlang.org/packages/image_picker with for selecting/taking the photo that I want to upload. The code so far uploads the image to Firebase storage successfully the only issue is that after the image is uploaded the app shuts down (doesn't really crash, it just closes and VS code looses connection to the device). The code is the following:

 File _image;

  Future _takeProfilePicture() async{
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState((){
      _image = image;
    });
  }

  Future _selectProfilePicture() async{
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState((){
      _image = image;
    });
  }

  Future<Null> _uploadProfilePicture() async{
    FirebaseUser user = await FirebaseAuth.instance.currentUser();

    final StorageReference ref = FirebaseStorage.instance.ref().child('${user.email}/${user.email}_profilePicture.jpg');
    final StorageUploadTask uploadTask = ref.putFile(_image);
    final Uri downloadUrl = (await uploadTask.future).downloadUrl;
  }

  void _selectAndUploadPicture() async{
    await _selectProfilePicture();
    await _uploadProfilePicture();
  }

  void _takeAndUploadPicture() async{
    await _takeProfilePicture();
    await _uploadProfilePicture();
  }

And the terminal prints the following:

W/Firestore( 6873): (0.6.6-dev) [Firestore]: The behavior for java.util.Date objects stored in Firestore is going to change AND YOUR APP MAY BREAK.
W/Firestore( 6873): To hide this warning and ensure your app does not break, you need to add the following code to your app before calling any other Cloud Firestore methods:
W/Firestore( 6873):
W/Firestore( 6873): FirebaseFirestore firestore = FirebaseFirestore.getInstance();
W/Firestore( 6873): FirebaseFirestoreSettings settings = new FirebaseFirestoreSettings.Builder()
W/Firestore( 6873):     .setTimestampsInSnapshotsEnabled(true)
W/Firestore( 6873):     .build();
W/Firestore( 6873): firestore.setFirestoreSettings(settings);
W/Firestore( 6873):
W/Firestore( 6873): With this change, timestamps stored in Cloud Firestore will be read back as com.google.firebase.Timestamp objects instead of as system java.util.Date objects. So you will also need to update code expecting a java.util.Date to instead expect a Timestamp. For example:
W/Firestore( 6873):
W/Firestore( 6873): // Old:
W/Firestore( 6873): java.util.Date date = snapshot.getDate("created_at");
W/Firestore( 6873): // New:
W/Firestore( 6873): Timestamp timestamp = snapshot.getTimestamp("created_at");
W/Firestore( 6873): java.util.Date date = timestamp.toDate();
W/Firestore( 6873):
W/Firestore( 6873): Please audit all existing usages of java.util.Date when you enable the new behavior. In a future release, the behavior will be changed to the new behavior, so if you do not follow these steps, YOUR APP MAY BREAK.

I tried implementing the suggested java code from the terminal but I cannot seem to find a way to write the equivalent in flutter using the cloud_firestore library https://pub.dartlang.org/packages/cloud_firestore , it does not have an equivalent for FirebaseFirestoreSettings (or I cannot seem to find one). Is there a way around this?

Thank you in advance!

like image 366
Marko Avatar asked Jul 13 '18 15:07

Marko


People also ask

How do I upload images to Firebase Storage Flutter?

Once you've created an appropriate reference, you then call the putFile() , putString() , or putData() method to upload the file to Cloud Storage. You cannot upload data with a reference to the root of your Cloud Storage bucket. Your reference must point to a child URL.

How do I upload images to Firebase?

Create a new project on android studio or open an existing project in which you want to add authentication and add the firebase to that android application. Two buttons: one for selecting an image from gallery. other button is for uploading an image on firebase storage on the cloud.

How do I show Firebase image in Flutter?

Make use of getDownloadURL() to get the URL of the image stored in Firebase storage and pass in the image file name. (it's “Flutter. png” in our example.) This is how we read image from Firebase storage and display them in our Flutter Web application.


1 Answers

Updated version of mmccabe's answer that works with version 1.0.4 of the firebase_storage plugin

Future<String> _pickSaveImage(String imageId) async {
  File imageFile = await ImagePicker.pickImage(source: ImageSource.camera);
  StorageReference ref =
    FirebaseStorage.instance.ref().child(imageId).child("image.jpg");
  StorageUploadTask uploadTask = ref.putFile(imageFile);
  return await (await uploadTask.onComplete).ref.getDownloadURL();
}

As of now you have to do:

var downloadURL = (await uploadTask.onComplete).ref.getDownloadURL();

because error: The getter 'future' isn't defined for the class 'StorageUploadTask'. (undefined_getter at [timetracker] lib/screens/image_detection.dart:63)

like image 182
Mans Avatar answered Sep 28 '22 04:09

Mans