Firefox webapp file input

Question 1

I assume you are currently simply using the markup ?

The device-storage:sdcard is for a very different set of use cases really. And we don't have that implemented on Firefox for Android yet.

The list of applications being shown is just the set of applications that we're getting from the Android Intents system. I would imagine that if the user has some sort of filebrowser app installed it might respond to that intent and it'd pop up there.

But of course that's not something you can rely on in your app.

I'm honestly somewhat surprised that there's no default applications on android that provide that functionality, but I guess that's how it is. Or does someone know of a way to also get a filepicker intent that we can hook up to?

Medium term you will be able to use the DeviceStorage API. This will give you direct JS access to the sdcard which will allow you to build your own UI for choosing a file from the SD card. But that extra power comes with quite a few downsides. It's a privileged API which means that you'll have to write the app as a packaged app and you have to use CSP. And you'll have to go through the Firefox marketplace review process (all privileged apps have to go through code review).

So it's a pretty distant second choice.

Other than that there aren't any solutions. The best would of course be if there was a way we could plopp up an Android file picker, but I'm not sure if that's doable. And it's definitely not implemented yet.

Question 2

According to the source code, this permission is only granted to apps that are packaged and privileged, the latter also means the app has to be signed by the Marketplace.

You can find more about packaged apps and privileged app types here: https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps

Question 3

Just install an Android file manager app (https://play.google.com/store/search?q=file+manager&c=apps) and you will be able to select files from the SD card. There is no need for specific rights because this is handled automatically by the standard file input.

Question 4

Accessing the SD Card can only be achieved through a privileged or certified app. Currently to my knowledge, there is no integration the system menus as you are hoping would be the case. Personally, I'm hoping that this will change.

API Documentation: https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage

You could create your own menu that mimics the the system one; in this way the user gets a seamless experience and they don't know the difference. It would require a little boilerplate though it's not insurmountable levels of boilerplate.

A quick snippet for browsing/enumerating all photos on the the SDCard:

var storage = navigator.getDeviceStorage("sdcard");

sdcard.browse = function () {
  var pics = navigator.getDeviceStorage('pictures');

  // Let's browse all the images available
  var cursor = pics.enumerate();

  cursor.onsuccess = function () {
    var file = this.result;
    alert("File found: " + file.name);

    // Once we found a file we check if there are other results
    if (!this.done) {
      // Then we move to the next result, which call the cursor
      // success with the next file as result.
      this.continue();
    }
  }

  cursor.onerror = function () {
    alert("No files found: " + this.error);
  }
};

If you would like some more details for reading, writing, and caulating available storage, I'm currently working on a little wrapper library in my spare time to work with the SDCard more easily (and handle some callbacks to integrate better with other code) in my spare time and can probably help you out.