How do you open a file chooser in a chrome packaged app with Dart

Issue

There don’t appear to be any dart packages for this, so I’m using Javascript interop. This is what I’ve got so far:

  js.scoped(() {
    done(entry) {
      print('ok');
    }
    js.context.doneCallback = new js.Callback.once(done);
    js.context.chrome.fileSystem.chooseEntry(null, js.context.doneCallback);
  });

It’s failing with:

Uncaught Error: Invocation of form fileSystem.chooseEntry(object, object) doesn’t match definition fileSystem.chooseEntry(optional object options, function callback)

So it seems the callback is being rejected because it’s the wrong type.

Any ideas?

chrome.fileSystem docs
Edit: Changed optional param back to null (I also tried Damien’s suggestion below).

Edit: this code works now – thanks Damien!

  js.scoped(() {
    done(entry) { print('ok'); }
    js.context.chrome.fileSystem.chooseEntry(null, new js.Callback.once(done));
  });

Edit2: Updated code which opens a file chooser and reads the path from it. However I’m not sure how to use a javascript FileReader object via js_interop.

Edit3: See discussion on the Dart mailing list.

Solution

However I’m not sure how to use a javascript FileReader object via js_interop.

I’ve implemented a very hacky solution to this, with a similar example to yours here:

https://gist.github.com/rmsmith/5878583

The way I’ve approached the issue is to implement the implicit interfaces of the types (File, FileEntry, FileReader) that exist in dart:html. I throw UnimplementedError for many methods until I need them.

The issue in your gist was that you were calling readAsText(blob, label) with an instance of your own FileEntry type, but you need to pass a Blob or File. Since the FileReader is in js, you actually need a js.Proxy to Blob or File.

Answered By – user2396155

Answer Checked By – Willingham (FlutterFixes Volunteer)