How to store image in flutter firestore and display it

Question

Trying to store image in books collection flutter but not letting me store and retrieve it later. Please help me trace the bug. Problem is with coverImage that is not letting me store the image URL in firebase so that the image could be displayed when its fetched later.

 if (name != null &&
                  price != null &&
                  author != null &&
                  description != null &&
                  discountpercentage != null &&
                  rating != null) {
                if (action == 'create') {
                  await books_collection.add({
                    "name": name,
                    "price": price,
                    "author": author,
                    "description": description,
                    "discountpercentage": discountpercentage,
                    "rating": rating,
                    "createdAt": Timestamp.now(),
                   "coverImage": Timestamp.now(),

                    //            "url": uploadFilterImage()
                  });
                }

                if (action == 'update') {
                  // Update the product
                  await books_collection.doc(documentSnapshot!.id).update({
                    "name": name,
                    "price": price,
                    "author": author,
                    "description": description,
                    "discountpercentage": discountpercentage,
                    "rating": rating,
                    "createdAt": Timestamp.now(),
                     "coverImage": uploadFilterImage()
                  });
            




    Future<String> uploadFilterImage() async {
        String url = "";
        final ImagePicker _picker = ImagePicker();
        XFile? image = await _picker.pickImage(source: ImageSource.gallery);
        Uint8List fileBytes = await image!.readAsBytes();
        if (fileBytes != null) {
          final _firebaseStorage = FirebaseStorage.instance;
          var name = Timestamp.now().millisecondsSinceEpoch;
          print("$name");
          var snapshot = _firebaseStorage.ref().child('$name');
          print("$name");
          TaskSnapshot task = await snapshot.putData(
            fileBytes,
            SettableMetadata(contentType: 'image/jpeg'),
          );
          url = await task.ref.getDownloadURL();
          if (url.isNotEmpty) {
            Get.snackbar("successfull", "image uploaded");
          }
        }
        return url;
      }

Answer 1

You need to await the uploadFilterImage() call in order to process the async function and not return a Future, but return the final value instead. The same is true for both your create and update cases.

await books_collection.doc(documentSnapshot!.id).update({
  "name": name,
  "price": price,
  "author": author,
  "description": description,
  "discountpercentage": discountpercentage,
  "rating": rating,
  "createdAt": Timestamp.now(),
  "coverImage": await uploadFilterImage() // here
});