uploading images on flutter web using a pub other than the image picker

Question

I want to upload images on the flutter web, but the pub I know like image_picker only supports Android and iOS, while Flutter Web doesn't support it. another pub that I know is pub image, but I don't know how to use pub image on flutter web.. I beg to share your knowledge about using pub image or other pubs to upload images that support flutter web..

Answer 1

I was seeking the same solution. Actually onChange doesn't work well on mobile safari, it need to change addEventListener and also need to append it.

  Future<void> _setImage() async {
    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.multiple = true;
    uploadInput.accept = 'image/*';
    uploadInput.click();
    //* onChange doesn't work on mobile safari
    uploadInput.addEventListener('change', (e) async {
      // read file content as dataURL
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });

      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    //* need to append on mobile safari
    document.body.append(uploadInput);
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    uploadInput.remove();
  }

This also works:

Future<void> _setImage() async {   
    final completer = Completer<List<String>>();
    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<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });
      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });
    // need to append on mobile safari
    document.body.append(input);
    // input.click(); can be here
    final List<String> images = await completer.future;
    setState(() {
      _uploadedImages = images;
    });
    input.remove();
}

Answer 2

you can use the FileUploadInputElement class of dart:html.

import 'dart:html';

Implement following code to start a file picker:

_startFilePicker() async {
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];
    final reader = new FileReader();

    reader.onLoadEnd.listen((e) {
      _handleResult(reader.result);
    });
    reader.readAsDataUrl(file);
  }
});
}

References

• Answer taken