[image_picker] Add support for web

[OlfatMostafa]

I know flutter web is still fresh but i'm trying to do image uploading in my flutter web project, so image_picker is still not supported but i'm looking for suggestions for any replacements or approaches for that.

I'm using firebase, and the part that i can't figure out is how to pick an image from my computer to upload it.

Thanks!

[ferhatb]

/cc @hterkelsen: would require hosting file input for upload and ability to click to run picker.

[aabounegm]

You can try this code as a workaround until plugins are supported by Flutter Web. It worked with me.

import 'dart:html';

void main() {
  final InputElement input = document.createElement('input');
  input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
  input.onChange.listen((e) {
    final List<File> files = input.files;
    for (final file in files) {
      final reader = new FileReader();
      reader.onLoad.listen((e2) {
        String fileContent = reader.result;
        print(fileContent);
      });
      reader.readAsText(file); // or '.readAsDataUrl' for using as img src, for example
    }
  });
  input.click();
}

Edit: here is a sample function that wraps it in a Future:

import 'dart:html';
import 'dart:async';

Future<List<String>> getFiles() {
  final completer = new Completer<List<String>>();
  final InputElement input = document.createElement('input');
  input
      ..type = 'file'
      ..multiple = true
      ..accept = 'image/*';
  input.onChange.listen((e) async {
    final List<File> files = input.files;
    Iterable<Future<String>> resultsFutures = files.map((file) {
      final reader = new 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);
  });
  input.click();
  return completer.future;
}

or in case you want only one file:

import 'dart:html';
import 'dart:async';

Future<String> getFile() {
  final completer = new Completer<String>();
  final InputElement input = document.createElement('input');
  input
      ..type = 'file'
      ..accept = 'image/*';
  input.onChange.listen((e) async {
    final List<File> files = input.files;
    final reader = new FileReader();
    reader.readAsDataUrl(files[0]);
    reader.onError.listen((error) => completer.completeError(error));
    await reader.onLoad.first;
    completer.complete(reader.result as String);
  });
  input.click();
  return completer.future;
}

Of course, you can tweak this according to your needs by changing the returned object (ex: File itself instead of reading it) and using a different reader.readAs* function.
Seeing that almost all Firebase plugins for Flutter depend on the Flutter package, I don't think you can use the Flutter package. Try to see if you can use the Web one instead

[aggmoulik]

I really love to work on the plugin.. Does anyone working on it?
Please tell me how to start creating plugin.

[harryterkelsen]

@ditman has been working on a prototype for image_picker

[ditman]

I have a prototype of the image_picker plugin for web that seems to work, at least in the happiest cases. It requires some overrides to dart:io (through the IOOverrides class), but I am not 100% sure it covers all possible use cases. You can take a look at it here.

It uses an in-memory, not persistent filesystem (from package:file) to temporarily store images/videos as they're selected/taken so they can be passed around the program and plugins, but the file will NOT be saved permanently anywhere, unless you do it yourself (like pushing the image to firebase as the OP mentioned!).

Again, Big Disclaimer: The pull request above will not end up merged as is, because it's a starting point for us on what to do with dart:io and other packages that need some special code to run on web.

Please, handle with care! However, if you test the proto I posted above and have any feedback, please do share!

[Thathy916]

Have you implemented the function of uploading the flutter web image? The image upload function I made can't be used on the mobile browser, except for chrome. What's the matter?

[ykaito21]

Have you implemented the function of uploading the flutter web image? The image upload function I made can't be used on the mobile browser, except for chrome. What's the matter?

I am facing the same issue. @Thathy916 Did you find any solution?