Question 119809 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – How can I upload mutiple-photo in flutter app via ImgePicker

I want to add the function which can upload multiple Photo image via ImagePicker
In this code, I can just upload single photo, not mutiple.
This app operating by flutter, dart and firebase server.

[Code] 
void dispose() {
textEditingController.dispose();
super.dispose();
     }

File _image;

 Future _getImage() async {
    var image = await ImagePicker.pickImage(
    source: ImageSource.gallery,
    maxWidth: 1000,
    maxHeight: 1000,
  );

   setState(() {
     _image = image;
        });
     }


Future _uploadFile(BuildContext context) async {
if (_image != null) {

  final firebaseStorageRef = FirebaseStorage.instance
      .ref()
      .child('post')
      .child('${DateTime.now().millisecondsSinceEpoch}.png');

  final task = firebaseStorageRef.putFile(
    _image,
    StorageMetadata(contentType: 'image/png'),
  );

  final storageTaskSnapshot = await task.onComplete;

  final downloadUrl = await storageTaskSnapshot.ref.getDownloadURL();

  await Firestore.instance.collection('post').add(
      {
        'contents': textEditingController.text,
        'displayName': widget.user.displayName,
        'email': widget.user.email,
        'photoUrl': downloadUrl,
        'userPhotoUrl': widget.user.photoUrl,
      });
}
Tags:

3

Answers


  1. 0 
    final images = await _picker.pickMultiImage(
          maxHeight: 1024,
          maxWidth: 1024,
          imageQuality: 50,
        );
    Login or Signup to reply.
  2. 0

    Instead of using ImagePicker.pickImage, use ImagePicker.pickMultiImage. That gives you a List instead of an XFile. Then you can just upload all images in the list. For instance, add an image parameter to your _uploadFile Function so that its function signature is

    Future _uploadFile(BuildContext context, XFile image)

    and just upload all images like

    for (final image of images) {
    _uploadFile(context, image)
    }

    Login or Signup to reply.
  3. 0

    I created here 3 functions used to pick files from imagePicker and to upload them to firebase storage.

    first, pick images from gallery:

final imageFiles = await pickImages();

second, upload the images:

final path = 'path/where/you/want/to/save/your/images';

final imageUrls = uploadImages(imagesFiles, path)

 print(imageUrls);
you can now use the images urls to save to firestore
 
 
 Future<List<File>> pickeImages() async {
  ImagePicker picker = ImagePicker();
  final images = await picker.pickMultiImage(
      maxHeight: 1000, maxWidth: 1000, imageQuality: 90);
  List<File> files = [];
  if (images == null || images.isEmpty) return [];
  for (var i = 0; i < images.length; i++) {
    final file = File(images[i].path);
    files.add(file);
  }
  return files;
}

Future<String?> _uploadImageFile(File file, String path) async {
  try {
    final storage = FirebaseStorage.instance;
    TaskSnapshot? taskSnapshot;
    final storageRef = storage.ref().child(path);
    final uploadTask = storageRef.putFile(file);
    taskSnapshot = await uploadTask.whenComplete(() {});
    final imageUrl = await taskSnapshot.ref.getDownloadURL();
    return imageUrl;
  } catch (e) {
    throw Exception(e.toString());
  }
}

Future<List<String>> uploadImages(
  List<File> files,
  String path,
) async {
  final urls = <String>[];
  try {
    if (files.isNotEmpty) {
      for (var i = 0; i < files.length; i++) {
        final file = files[i];
        final imagePath = '$path/${Random().nextInt(10000)}.jpg';
        final url = await _uploadImageFile(file, imagePath);
        urls.add(url!);
      }
    }
    return urls;
  } on FirebaseException {
    rethrow;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search