If you’ve tried once to open file or play media on Cordova/PhoneGap App you certainly have faced “strange” issues or behaviors. The web is full of bad experiences looking for a “simple way” to open file. Seems standard but it’s not, and there’s none quick and ready solution or lib to achieve it. I’ll resume on this post the issues I’ve faced and how I’ve done to make it happen, from the download of remote file till opening it on device.
File API
First of all is the File API introduced by cordova-plugin-file. This plugin implements a File API allowing read/write access to files residing on the device. This plugin is based on several specs, including : The HTML5 File API.
This plugin defines global cordova.file object. Although in the global scope, it is not available until the deviceready event fire.
I recommend you to read CORDOVA FILE PLUGIN EXAMPLES to dive deeper on File API, but to resume I’ll share below the main piece of code you’ll need to handle a File on your device FileSystem:
window.resolveLocalFileSystemURL(
path,
function (entry) {
...
},
function (err) {
$log.debug(err);
}
);
Get mime-type
Before open file you’d probably like to know its mime-type, to play an audio or video on its html5 element within your App for example. You can also choose to display different labels or icons for pdf, audio, excel, etc. Then, to do it with File API it’s easy as described below:
window.resolveLocalFileSystemURL(
path,
function (entry) {
entry.file(function(file) {
var s = "";
s += "<b>name:</b> " + file.name + "<br/>";
s += "<b>localURL:</b> " + file.localURL + "<br/>";
s += "<b>type:</b> " + file.type + "<br/>";
s += "<b>lastModifiedDate:</b> " + (new Date(file.lastModifiedDate)) + "<br/>";
s += "<b>size:</b> " + file.size + "<br/>";
document.querySelector("#status").innerHTML = s;
});
},
function (err) {
$log.debug(err);
}
);
As you can see, same function return several useful properties, as size, name and type. The example above has been published on Raymond Camden previous post.
It’s important to mention that API only provide mime-type as result if file has an extension. Without extension it should returns null.
Open File
Available Plugins
| iOS | Android | Local File | Remote File | Observation | |
|---|---|---|---|---|---|
| cordova-plugin-file-opener2 | UIDocumentInteractionController presentOptionsMenu | mime-type required | |||
| DocumentHandler | Quick Look preview | ||||
| cordova-open | Quick Look preview | extension required |
