Fork us on GitHub

Native File Open Dialogs

A new library for file choosers
Post Image

Native File Open Dialogs

Codename One has always provided access to the device’s photos and videos via Display.openGallery() but it hasn’t provided an API to open arbitrary file types because this type of functionality was not available on most mobile platforms. Times have changed and most platforms now offer support for more than just images and photos, so we decided to provide access to this functionality as a cn1lib. Here is a short introduction to the cn1-filechooser library.

Introduction by Example

I recently developed an app that provided optical character recognition (OCR) on images and PDFs. As you might expect, an app like this needs to allow the user to select a PDF or an image to be converted by some mechanism. Using Display.openGallery() I could present the user with access to their images, but I also needed them to be able to select PDFs. The cn1-filechooser library comes to the rescue in this case:

After installing the cn1-filechooser library into my project, I added the following snippet to respond to the event where the user taps the "open" button:

ActionListener callback = e->{
   if (e != null && e.getSource() != null) {
       String filePath = (String)e.getSource();

       //  Now do something with this file
   }
};

if (FileChooser.isAvailable()) {
    FileChooser.showOpenDialog(".pdf,application/pdf,.gif,image/gif,.png,image/png,.jpg,image/jpg,.tif,image/tif,.jpeg", callback);
} else {
    Display.getInstance().openGallery(callback, Display.GALLERY_IMAGE);
}

The FileChooser.isAvailable() should return true on iOS, Android, Windows 10 (UWP), JavaSE (the Simulator), and Javascript, so it’s almost not necessary. Nonetheless, I do provide a fallback to the standard image gallery in case I happen to later want to build my app on another platform that doesn’t support the file chooser yet.

Notice that the first parameter to showOpenDialog() is a string with a comma-delimited list of extensions and mimetypes. You can include both mime-types and extensions here. The syntax is designed to be compatible with the HTML file input’s accept attribute.

Screenshots

So let’s see what this looks like on the various platforms:

iOS:

When you open the file chooser it gives you a list of your device’s installed document providers:

iOS filechooser

In my case I have my iCloud drive (everyone will have this), and Dropbox because I have the Dropbox app installed on my phone. But if you have other apps have DocumentProvider extensions, then those will also be listed.

It also includes an "Images" option that allows the user to browse their local images if they have included any "image" types in the call to showOpenDialog()

On iOS, your App ID must include the iCloud entitlement, so, when you create your app ID in your apple developer account, make sure that you check this option.

Android:

On android it will open a versatile file chooser that allows you to browse and select files in your Google Drive, local images, Downloads, or on internal storage.

Android filechooser

Windows Phone 10:

On Windows Phone 10, the dialog allows users to browse their OneDrive, or local files.

Windows Phone 10 filechooser

Desktop

In the desktop builds, the simulator, javascript (on the desktop), and Windows 10 Desktop, you will just see the name file chooser dialog.

More Information

For more information, you can check out the cn1-filechooser github repo.

The best way to install this library is through the Extensions section of Codename One Settings.

You can also try out the OCR.net app which uses the cn1-filechooser plugin.

Share this Post:

Posted by Steve Hannah

Steve writes software for Codename One. He is an open source enthusiast who loves to tinker with new technologies.