I'm trying to post a note with an image. I had this working before... not sure what I changed but I walked away for awhile and now I'm a little rusty. I'm getting my own error message "All fields required."
In my debug console it shows the url and path of the images, so the images are successfully uploaded to Firebase Storage. I just don't know how display them in my app.
File? imageFile;
String? fileName;
Future<void> uploadMultipleImages() async {
final picker = ImagePicker();
final List<XFile>? pickedImages = await picker.pickMultiImage();
if (pickedImages == null) {
return null;
}
setState(() {
loading = true;
});
await Future.forEach(pickedImages, (XFile image) async {
String fileName = image.name;
File imageFile = File(image.path);
try {
await firebaseStorage.ref(fileName).putFile(imageFile);
} on FirebaseException catch (e) {
print(e);
}
});
setState(() {
loading = false;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("All images uploaded successfully")));
}
Future<List> loadImages() async {
List<Map> files = [];
final ListResult result = await firebaseStorage.ref().listAll();
final List<Reference> allFiles = result.items;
await Future.forEach(allFiles, (Reference file) async {
final String fileUrl = await file.getDownloadURL();
files.add({
"url": fileUrl,
"path": file.fullPath,
});
});
print(files);
return files;
}
Future<void> delete(String ref) async {
await firebaseStorage.ref(ref).delete();
setState(() {});
}
InkWell(
onTap: () {
uploadMultipleImages();
},
child: SizedBox(
height: 150,
child: imageFile == null
? Center(child: Icon(Icons.image, size: 100))
: Center(
child: Image.file(imageFile!),
),
),
),
SizedBox(
height: 30,
),
SizedBox(
height: 300,
child: FutureBuilder(
future: loadImages(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length ?? 0,
itemBuilder: (context, index) {
final Map image = snapshot.data[index];
return Padding(
padding: EdgeInsets.only(left: 0.0),
child: Column(
children: [
Card(
child: SizedBox(
height: 200,
child: Stack(
children: [
CachedNetworkImage(
imageUrl: image['url'],
placeholder: (context, url) =>
Image.asset(
'assets/placeholder.jpg'),
errorWidget:
(context, url, error) =>
Icon(Icons.error),
),
],
),
),
),
child: ElevatedButton(
onPressed: () async {
if (imageFile == null ||
titleController.text.isEmpty ||
descriptionController.text.isEmpty ||
_controllers.any((element) => element.text.isEmpty) ||
directionsController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("All fields are required")));
} else {
setState(() {
loading = true;
});
String imageUrl = await FirebaseStorage.instance
.ref(fileName)
.putFile(imageFile!)
.then((result) {
return result.ref.getDownloadURL();
});
print(imageUrl);
await FirestoreService().insertNote(
imageUrl,
titleController.text,
descriptionController.text,
_controllers
.map((element) => element.text)
.join("\n"),
directionsController.text,
widget.user.uid);
setState(() {
loading = false;
});
class NoteModel {
String image;
String id;
String title;
String description;
String notes;
String directions;
Timestamp date;
String userId;
NoteModel({
required this.image,
required this.id,
required this.title,
required this.description,
required this.notes,
required this.directions,
required this.date,
required this.userId
});
factory NoteModel.fromJson(DocumentSnapshot snapshot){
return NoteModel(
image: snapshot['image'],
id: snapshot.id,
title: snapshot['title'],
description: snapshot['description'],
notes: snapshot['notes'],
directions: snapshot['directions'],
date: snapshot['date'],
userId: snapshot['userId']
);
}
}
Any help is appreciated!
And if you can think of a better question for this problem, please leave it in the comments so we can potentially help someone else. I'm not very good at phrasing questions about things I'm struggling with...