Dart/Flutter: Firebase and Firestore wait for async for loop to complete before continuing - flutter

Question

I am trying to submit images to Firebase storage, and then also submit the links to the images to the new record that I am "linking" the images to.
My issue is that if I add image(s) to the data, it seems that the upload makes the rest of the firebase activity not happen (it doesn't make sense to me).
So essentially when I click the FAB then it's supposed to submit the data.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.send),
// SUBMIT THE DATA
onPressed: () async {
setState(() {
// Show the modal spinner until submit is complete
showSpinner = true;
});
// upload images
List<StorageReference> fileRefs = [];
for (var image in imageFiles) {
fileRefs.add(await uploadPic(context, image));
}
// When there are images in the imageFiles array then the below part doesn't run
// but if no images was selected it runs fine, if images are selected they get uploaded
// to firebase storage, but no record gets added. :(
_firestore.collection('InspectionPoints').add({
'project': selectedProject,
// some other fields
'user': loggedInUser.email,
'photoIds': fileRefs.length == 0 ? [] : fileRefs,
'timestamp': DateTime.now(),
//'photoIds' : imageFiles;
});
setState(() {
// <--------------- this still runs
clearForm();
showSpinner = false;
});
} // onPressed
),
I also now tried to put the getting the file refs into an async formula, but it also doesn't work:
// upload images
List<StorageReference> fileRefs = await getFileRefs(context);
And the new function:
Future<List<StorageReference>> getFileRefs(BuildContext context) async {
List<StorageReference> fileRefs = [];
for (var image in imageFiles) {
fileRefs.add(await uploadPic(context, image));
}
return fileRefs;
}
Edit: My Actual uploading code:
Future<StorageReference> uploadPic(BuildContext context, File image) async {
StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child(basename(image.path));
StorageUploadTask uploadTask = firebaseStorageRef.putFile(image);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
setState(() {
print('File: ${image.path} uploaded to the cloud');
showInSnackBar('File: ${image.path} uploaded to the cloud');
});
return taskSnapshot.ref;
}

Answer 1

To upload an image to Firebase Storage, you can use the code below.
Future upLoadImage(_providedFile, String folderName, String imageName) async{
//_providedFile -> FILE THAT CONTAINS IMAGE
//folderName -> FOLDER NAME IN FIREBASE STORAGE
//imageName -> NAME OF THE IMAGE THAT WILL BE SAVED ON FIREBASE STORAGE
//FILE UPLOAD LOCATION
//IF YOU DON'T WANT TO ADD IMAGE IN A FOLDER JUST REMOVE
//".child(folderName)" from the line
StorageReference reference = firebasestorage.ref().child(folderName).child('$imageName.jpg');
StorageUploadTask uploadTask = reference.putFile(_providedFile); await
uploadTask.onComplete;
}
I hope this will help you.

Answer 2

You cannot save the type StorageReference to firebase cloud, and due to that type failing to submit the whole submit fails, but because the images are uploaded separately from the data entry, they are already there by the time the data entry fails to submit.
The fix was to convert the StorageReference to string via the .path property.