Save Image Url in Cloud FireStore - flutter

I try to create details of product in Cloud FireStore. Create document and save image in storage is all works. Mu issue is image url doesn't save in document.
dart file
class ProductService {
Firestore _firestore = Firestore.instance;
void createProduct(_nameproductController, _priceproductController,
_currentCategory, url) async {
_firestore.collection("products").document().setData({
'name': _nameproductController,
'price': _priceproductController,
'category': _currentCategory,
'image': url,
});
}
}
upload image
void uploadImg() async {
var timekey = DateTime.now();
fb.StorageReference storageReference =
fb.storage().ref('imgProduct/${timekey.toString()}.jpg');
fb.UploadTaskSnapshot uploadTask = await storageReference
.put(_image1, fb.UploadMetadata(contentType: 'image/jpg'))
.future;
var imageUrl = await uploadTask.ref.getDownloadURL();
url = imageUrl.toString();
print('Image Url' + url);}
submit button
RaisedButton(
onPressed: () async {
if (_formKeyProduct.currentState.validate()) {
uploadImg();
ProductService().addProduct(
_nameproductController.text,
_priceproductController.text,
_currentCategory.categoryname.toString(),
url,
);
_formKeyProduct.currentState.reset();
_nameproductController.clear();
_priceproductController.clear();
}
setState(() {
_currentCategory = null;
});
},

you need to await uploadImg();

Related

How I get file url from firestore path in flutter

When upload audio file then I gave firestorage file path , it's uploading successfully but I want to get file URL in to logged user details in firestore that's also insert correctly in firestore but not file URL that is file path. How I get URL from file path.
//firestorage upload
Future<void> _onFileUploadButtonPressed() async {
FirebaseStorage firebaseStorage = FirebaseStorage.instance;
setState(() {
_isUploading = true;
});
try {
await firebaseStorage
.ref()
.child("${loggedInUser.uid}/records1")
.child(
_filePath.substring(_filePath.lastIndexOf('/'), _filePath.length))
.putFile(File(_filePath));
widget.onUploadComplete();
onsend();
} catch (error) {
print('Error occured while uplaoding to Firebase ${error.toString()}');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error occured while uplaoding'),
),
);
} finally {
setState(() {
_isUploading = false;
});
}
}
//firestore URL upload
Future<void> onsend() async {
//uploading to cloudfirestore
FirebaseFirestore firebaseFirestore = FirebaseFirestore.instance;
await firebaseFirestore
.collection("users")
.doc("${loggedInUser.uid}")
.collection("reco")
.add({'downloadURL': _filePath}).whenComplete(() =>
showSnackBar("Image uploaded successful", Duration(seconds: 2)));
}
This is my code I use upload and get image url from Firebase storage:
Future<String> uploadImageToFirebase(File imageFile) async {
var user = StaticVariable.myUser!;
String imagePath = '';
try {
String downloadUrl;
FirebaseStorage firebaseStorage = FirebaseStorage.instance;
Reference ref = firebaseStorage.ref(
'uploads-images/${user.profileId}/images/${DateTime.now().microsecondsSinceEpoch}');
TaskSnapshot uploadedFile = await ref.putFile(imageFile);
if (uploadedFile.state == TaskState.success) {
downloadUrl = await ref.getDownloadURL();
imagePath = downloadUrl;
}
return imagePath;
} catch (e) {
return '';
}
}
I try to improve from above code:
Future<void> _onFileUploadButtonPressed() async {
FirebaseStorage firebaseStorage = FirebaseStorage.instance;
String downloadUrl = '';
setState(() {
_isUploading = true;
});
try {
Reference ref = firebaseStorage
.ref()
.child("${loggedInUser.uid}/records1")
.child(
_filePath.substring(_filePath.lastIndexOf('/'), _filePath.length));
TaskSnapshot uploadedFile = await ref.putFile(File(_filePath));
if (uploadedFile.state == TaskState.success) {
downloadUrl = await ref.getDownloadURL();
}
widget.onUploadComplete();
onsend();//send downloadURL after get it
} catch (error) {
print('Error occured while uplaoding to Firebase ${error.toString()}');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error occured while uplaoding'),
),
);
} finally {
setState(() {
_isUploading = false;
});
}
}

uploading multiple xfiles to firebase storage

I am trying to upload multiple (max 5) xfiles images (image_picker library) to firebase storage. currently, it uploads only one with the below method:
Future<void> addProduct({
BuildContext? ctx,
String? proName,
String? productDescription,
double? count,
double? price,
required List<XFile> images
}) async {
try {
var imageUrls = await Future.wait(images.map((_image) =>
uploadFile(_image)));
await firestore
.collection(outletsCollection)
.doc(_currentUserOutletId)
.set({
products: FieldValue.arrayUnion([
{
productId: Uuid().v4(),
productName: proName,
prodDesc: productDescription,
countInStock: count,
productPrice: price,
productImg: FieldValue.arrayUnion([imageUrls]),
}
]),
});
} catch (err) {
String errMsg = "error blahblah";
errorDialog(ctx!, errMsg);
}
notifyListeners();
}
for the uploadFile method i tried using images.forEach() instead of .map(), but it gave me void type error. uploadFile method:
Future<String> uploadFile(XFile _image) async {
var storageReference = storage
.ref()
.child('product_images')
.child(_currentUserOutletId!)
.child(Uuid().v4());
final metadata = SettableMetadata(
contentType: 'image/jpeg',
customMetadata: {'picked-file-path': _image.path},
);
if (kIsWeb) {
await storageReference.putData(await _image.readAsBytes(), metadata);
} else {
await storageReference.putFile(io.File(_image.path), metadata);
}
return await storageReference.getDownloadURL();
}
so, at the end only one image is uploaded and addProduct() does not add product to firestore database. log in android studio returns nothing. I couldn't find a method that would work with the xfile. help appreciated very much!
List<XFile> _imageFileList;
try{
final pickedFile = await _picker.pickMultiImage();
setState(() {
_imageFileList = pickedFile;
_imageFileList.forEach((element) async {
firebase_storage.FirebaseStorage storage = firebase_storage.FirebaseStorage.instance;
var date = DateTime.now().millisecondsSinceEpoch;
try {
setState(() {
_loading = true;
});
firebase_storage.UploadTask task = firebase_storage.FirebaseStorage.instance.ref('uploads/photos/'+date.toString()+'_image.png').putData(await element.readAsBytes(), SettableMetadata(contentType: 'image/jpeg'));
await storage.ref('uploads/file-to-upload.png').putData(await element.readAsBytes(), SettableMetadata(contentType: 'image/jpeg'));
firebase_storage.TaskSnapshot downloadUrl = (await task);
String url = (await downloadUrl.ref.getDownloadURL());
// print(url.toString());
} on FirebaseException catch (e) {
// e.g, e.code == 'canceled'
setState(() {
_loading = false;
});
}
});
try this way using image_picker plugin. You can get url after image upload and you have yo it in your data.

How to get Download URL from Firebase Storage in flutter

The Following Code is used to Upload any image from gallery/Camera to Firebase storage. I was successful in uploading the image to storage along with meta data. Now the problem is I am not able to get the download URL of the uploaded image. Tried a lot but didn't find any solution.
FirebaseStorage storage = FirebaseStorage.instance;
final picker = ImagePicker();
PickedFile pickedImage;
File imageFile;
Future<void> _upload(String inputSource) async {
try {
pickedImage = await picker.getImage(
source: inputSource == 'camera'
? ImageSource.camera
: ImageSource.gallery,
maxWidth: 1920);
final String fileName = path.basename(pickedImage.path);
imageFile = File(pickedImage.path);
try {
// Uploading the selected image with some custom meta data
await storage.ref(fileName).putFile(
imageFile,
SettableMetadata(
customMetadata: {
'uploaded_by': 'A bad guy',
'description': 'Some description...'
},
),
);
// Refresh the UI
setState(() {});
} on FirebaseException catch (error) {
print(error);
}
} catch (err) {
print(err);
}
}
Hope You're Doing Well …
You Can Try This Method To Get The URL Of The Image(Any File) From Firebase Storage To Firebase Store And Then You Can Retrieve Image .
class _UploadAdState extends State<UploadAdPage> {
final formKey = GlobalKey<FormState>();
File _myimage;
String imgUrl;
Future getImage1(File chosenimage) async {
PickedFile img =
await ImagePicker.platform.pickImage(source: ImageSource.gallery);
if (chosenimage == null) return null;
File selected = File(img.path);
setState(() {
_myimage = chosenimage;
});
}
// changing the firestore rules and deleteing if request.auth != null;
sendData() async {
// to upload the image to firebase storage
var storageimage = FirebaseStorage.instance.ref().child(_myimage.path);
UploadTask task1 = storageimage.putFile(_myimage);
// to get the url of the image from firebase storage
imgUrl1 = await (await task1).ref.getDownloadURL();
// you can save the url as a text in you firebase store collection now
}
}
I am using in my app this function. Pass image file and download with getDownloadUrl .
Future <String> _uploadphotofile(mFileImage) async {
final Reference storageReference = FirebaseStorage.instance.ref().child("products");
UploadTask uploadTask = storageReference.child("product_$productId.jpg").putFile(imgfile);
String url = await (await uploadTask).ref.getDownloadURL();
return url;
}

How to upload image on cloud firestore linked to an entry?

I am trying to upload image on cloud firestore. But there is a error I am not able to catch.
I am using the code under uploadFile from here
Future<void> getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
widget._image = image;
print("added image");
});
uploadImage();
}
Future uploadImage() async {
String fileName = DateTime.now().millisecondsSinceEpoch.toString();
StorageReference reference = FirebaseStorage.instance.ref().child(fileName);
StorageUploadTask uploadTask = reference.putFile(widget._image);
StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
storageTaskSnapshot.ref.getDownloadURL().then((downloadUrl) {
widget.photourl = downloadUrl;
}, onError: (err) {
print('Error');
});
}
'added image' prints on the terminal, so there isn't a problem in that it seems.
photourl is null, but it should contain the url.
Thank you.
In the above code, you are just getting an image URL from Firebase storage. You need to update the photoURL in Firestore also.
Future<void> updateOneField = database
.collection('entries')
.document('D3idV9o7uWT4pWvby643')
.updateData(
{
"photourl": downloadUrl
});
It seems the problem was because of state of widget. This solved it
Future uploadImage() async {
String fileName = DateTime.now().millisecondsSinceEpoch.toString();
StorageReference reference = FirebaseStorage.instance.ref().child(fileName);
StorageUploadTask uploadTask = reference.putFile(widget._image);
StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
storageTaskSnapshot.ref.getDownloadURL().then((downloadUrl) {
setState(() {
widget.photourl = downloadUrl;
});
}, onError: (err) {
print('Error');
});
}

How to upload a image url downloaded from firebase storage to firestore document for newly registered user?

I have made it till uploading the image to firebase storage and download the url.Here, I need to store the newly registered user information in an Firestore document. I am storing some details one of those is the image URL downloaded from firebase storage.
Now, I need to assign the downloaded Url to Firestore to access it in my dart pages.
uploadImage() async {
var random = Random(25);
final StorageReference fireref = FirebaseStorage.instance
.ref()
.child('profilepics/${random.nextInt(5000).toString()}.jpg');
StorageUploadTask task = fireref.putFile(profilepic);
StorageTaskSnapshot snapshottask = await task.onComplete;
String downloadUrl = await snapshottask.ref.getDownloadURL();
if (downloadUrl != null) {
userManagement.addProfilePic(downloadUrl.toString()).then((val) {
Navigator.of(context).pushReplacementNamed('/twelf');
});
}
}
The above is the code of getting the image url from firebase storage.And, If you can see I have called a method addProfilePic to add the downloaded URL to firestore. And the method is,
Future addProfilePic(picUrl) async {
//---
}
What Should i write in this method to upload url to firestore. I am not able to understand.
Additional code for understanding:
class UserManagement {
storeNewUser(user, context) {
Firestore.instance.collection('/userdetails').add({
'Email': user.email,
'uid': user.uid,
'displayName': user.fullname,
'photoUrl': user.photoUrl
}).then((value) {
Navigator.of(context).pop();
Navigator.of(context).pushReplacementNamed('/selectpic');
}).catchError((e) {
print(e);
});
}
And the below code is near registration the final code that upload data to firestore:
final String userId = await widget.auth
.createUserWithEmailAndPassword(_email, _password)
.then((signedInUser) async {
var userUpdateInfo = new UserUpdateInfo();
userUpdateInfo.displayName = _fullname;
userUpdateInfo.photoUrl = _imageurl;
//'https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-1024-80.jpg';
final user = await FirebaseAuth.instance.currentUser();
user.updateProfile(userUpdateInfo).then((user) {
FirebaseAuth.instance
.currentUser()
.then(
(user) => {UserManagement().storeNewUser(user, context)})
.catchError((e) {
print(e);
});
}).catchError((e) {
print(e);
});
}).catchError((e) {
print(e);
});
print('Registered user: $userId');
}
Try this:
Future<String> uploadImage(profilepic) async {
StorageUploadTask uploadTask = storageRef.child("profilepics/${random.nextInt(5000).toString()}.jpg").putFile(profilepic);
StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
String downlaodUrl = await storageTaskSnapshot.ref.getDownloadURL();
return downlaodUrl;
}
// String imageUrl = await uploadImage(profilepic); You can store the value of imageUrl in firebase document.
Firestore.instance.collection('/userdetails').add({
// All fields you want to have in a document
'photoUrl': imageUrl; // use the image url variable
});
/// To update a currentUser document
Firestore.instance.collection('/userdetails')
.document(your_user_document_name_here)
.updateData({
// All fields you want to update in a document
'photoUrl': imageUrl; // use the image url variable
});