Why returning value from picked file is null ? Flutter

Question

In my App I'm using image_picker and image_picker_web but it throws No podspec found for 'image_picker_web' in '.symlinks/plugins/image_picker_web/ios'exception when running on iOS. So I decided not to use it and pick the file like in the accepted solution here How to Pick files and Images for upload with flutter web. Print for picked file is correct but my method returns null a I guess it returns the variable before it gets assigned a value. I don't know html so I'm kinda lost here.. What am I doing wrong with returning the picked value?

FileReader reader = FileReader();
InputElement uploadInput = FileUploadInputElement();


Future<Uint8List> pickImage() async {
    print('FirebaseImageStorageRepositoryWeb. pickImage() started');
    // image_picker_web works on web but creates pod problems on iOS

//    Uint8List imageData;
//    String fileName;
//    await picker.getImage(source: ImageSource.gallery).then((picked) {
//      picked.readAsBytes().then((data) {
//        imageData = data;
//      });
//    });

    // image_picker // notworking on web...

    

    //html
    Uint8List imageData;
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.click();

    uploadInput.onChange.listen((e)  {
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];

        print(
            'selected file: type:${file.type},name: ${file.name}, size: ${file.size}');

        reader.onLoadEnd.listen((e) {
          imageData = reader.result;
//          return imageData; // not working
        });

        reader.onError.listen((fileEvent) {
          print('Some Error occured while reading the file');
        });

        reader.readAsArrayBuffer(file);
      }
    });
    return imageData;
  }

score 0 · Accepted Answer · answered Jul 11 '20 at 14:37

Following the answer at Image picker flutter web 1.9 (not the accepted one .. ) I could see what was wrong with the code above..

working:

@override
  Future<Uint8List> pickImage() async {
    print('FirebaseImageStorageRepositoryWeb.pickImage() started');
    final completer = Completer<Uint8List>();
    final InputElement input = document.createElement('input');
    input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
    input.click();
    // onChange doesn't work on mobile safari
    input.addEventListener('change', (e) async {
      final List<File> files = input.files;
      Iterable<Future<Uint8List>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsArrayBuffer(files.first); // .readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result);
      });

      final results = await Future.wait(resultsFutures);
      completer.complete(results.first);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final Uint8List image = await completer.future;
    input.remove();
    return image;
  }

Why returning value from picked file is null ? Flutter

1 Answers1

working: