I'm able to choose a list of images from Image Picker Web and display it on my app.

 Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsWidget();

    _pickedImages.clear();
    if (images != null) _pickedImages.addAll(images);
    setState(() {
          _photo = _pickedImages;
    });

I am NOT able to upload the list of images (or as individual images) to Firebase Storage. There's always some kind of complete problem.

void UploadImage(List<Image> pickedImages) async {
  Directory appDocDir = await getApplicationDocumentsDirectory();
  String appDocPath = appDocDir.path;
  print(appDocPath);
  final filePath = "${appDocPath}/path/to/mountains.jpg";
  final file = File(filePath);

// Create the file metadata
  final metadata = SettableMetadata(contentType: "image/jpeg");

// Create a reference to the Firebase Storage bucket
  final storageRef = FirebaseStorage.instance.ref();

// Upload file and metadata to the path 'images/mountains.jpg'
  final uploadTask =
      storageRef.child("images/mountains.jpg").putFile(file, metadata);
}

I understand the above code isn't catered to my app yet and the reason is so you can see the default code. I don't get past appDocDir = await getApplicationDocumentsDirectory() I always get this:

void _complete() {
     assert(_completed == null);
     _completed = true;
     _primaryCompleter.complete();
     _secondaryCompleter?.complete();
}

CodePudding user response：

I'm assuming that you are using the path_provider package. But this package isn't supported for web.

As an alternative, take a look at this StackOverflow post:

• How can I read and Write Files in Flutter Web?

CodePudding user response：

There are several solutions to this, but you can choose what is great for you.

1

Using your current package for picking the image you will have to change the format you saved the picked images from List<Image>

 Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsWidget();

To - List<Uint8List>

 Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsBytes();

You can then easily send all the images using my firebase function below, but just changes the function argument and also finds a unique child name for the storageRef.

2

Using this package file_selector, you should be able to pick your images, preview them and send them to firebase.

I added some functions you can just use to achieve this

Picking the web images and returning them in XFile format, so they can be used in any other format you will like them to be.

  Future<List<XFile>> _pickWebImages() async {
    final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
    final images = await openFiles(acceptedTypeGroups: [typeGroup]);

    if (images == null) return null;

    return images;
  }

This is a sample firebase upload function, you can send the list of images and it should upload them for you.

  Future<void> uploadWebImages(List<XFile> images) async {
    // Create the file metadata
    final metadata = SettableMetadata(contentType: 'image/jpeg');

    // Create a reference to the Firebase Storage bucket
    final storageRef = FirebaseStorage.instance.ref('images');

    // Upload files and metadata to the bucket
    for (final image in images) {
      final data = await image.readAsBytes();
      final uploadTask = storageRef.child(image.name).putData(
            data,
            metadata,
          );

      await uploadTask;
    }

  }