Home > Software engineering >  Uploading multiple Images to firebase in flutter
Uploading multiple Images to firebase in flutter

Time:03-12

I sucessfully Get to pick multiple images from gallery and decided to try uploading to firebase and as well retrieving the image URL. after calling the upload it requested a pass a parameter which i did but it gives an error "The argument type 'List' can't be assigned to the parameter type 'Asset" when i try to specify the index of the parameter i passed it only Saves that image with that particular index.

i also tried a for loop but still it saves only one image and return its url.

How do i get to Upload all the images Below is how i load the images.

Future<void> loadAssets() async {
  
  List<Asset> resultList = <Asset>[];

  resultList = await MultiImagePicker.pickImages(
      maxImages: 300,
      enableCamera: true,
      selectedAssets: images,
      cupertinoOptions: const CupertinoOptions(takePhotoIcon: "chat"),
      materialOptions: const MaterialOptions(
        actionBarColor: "#abcdef",
        actionBarTitle: "Example App",
        allViewTitle: "All Photos",
        selectCircleStrokeColor: "#000000",
      ));
if (!mounted) return;
setState(() {
  images = resultList;
});

}

then i upload the image using the following snippet

Future UploadImage(Asset asset) async {
String fileName = popop;
ByteData byteData = await asset.getByteData();
List<int> imageData = byteData.buffer.asUint8List();
Reference ref = FirebaseStorage.instance.ref().child(fileName);
UploadTask uploadTask = ref.putData(Uint8List.fromList(imageData));

  TaskSnapshot snapshot= await uploadTask;
  String url= await snapshot.ref.getDownloadURL();
  if (kDebugMode) {
    print(url);
  }
  ///       After this Update user Profile or add url to collection


return url;

} used the below code to call/upload a single image out of the list

RaisedButton(
          child: const Text("Save Image"),
          onPressed: () => UploadImage(images[0]),
        ),

How to i get to upload all images. i even tried the for loop below

for(int i=o; i<images.length;i  ){
    UploadImages(images[i]);
 }

But only uploaded a single image

CodePudding user response:

You can iterate over your images like this for example:

final fileNames = <String>[];
for (final image in images) {
  final fileName = await uploadImage(image);
  fileNames.add(fileName);
}

Not sure whether you really need to call getDownloadUrl() (depends on your use case), but this method creates a public and long-lived url.

If you just want to store a reference in Cloud Firestore for example, you can get the name / fullPath of the respective file from your TaskSnapshot in the uploadImage function as follows:

Future<String> UploadImage(Asset asset) async {
  String fileName = popop;
  ByteData byteData = await asset.getByteData(); 
  List<int> imageData = byteData.buffer.asUint8List();
  Reference ref = FirebaseStorage.instance.ref().child(fileName);
  UploadTask uploadTask = ref.putData(Uint8List.fromList(imageData));

  TaskSnapshot snapshot= await uploadTask;
  // Assuming you are interested in the fullPath use snapshot.ref.fullPath
  // For the name use snapshot.ref.name instead
  return snapshot.ref.fullPath
}
  • Related