Create File Explorer in BlackBerry PhoneGap project

Android, BlackBerry, JQuery Mobile, PhoneGap 3 Minutes

Hi,

I am using PhoneGap + jQuery Mobile for my current project.
It was required to upload images from gallery.

Unfortunately, In BlackBerry we can’t open built in Gallery to pick an image. So though why not to provide my file explorer? What worked pretty well.

As I am using PhoneGap, you can also use the same code for Android and may be for WebOS. In iOS it may not work.

Your index.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>File Explorer</title>
<script src="javascript/phonegap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/jquery.mobile.min.css" />
<script src="javascript/jquery.min.js"></script>
<script src="javascript/jquery.mobile.min.js"></script>
<script src="javascript/source.js"></script>
</head>
<body>
	<div data-role="page" id="FileExplorerPage">
		<div data-role="header" data-position="fixed">
			<h1>
				File Explorer
			</h1>
		</div>
		<div data-role="content">
			<div id="Explorer" style="float:left"></div>
		</div>
	</div>
</body>
</html>

And you JavaScript magic code: 

/**
 * File explorer logic
 */
var currentPath = "file:///store";
$('#FileExplorerPage').live('pagebeforeshow', function(event) {
	populate(currentPath);
});
function populate(path){
	try {
		var dirEntry = new DirectoryEntry({fullPath: path});
		var directoryReader = dirEntry.createReader();
		directoryReader.readEntries(successDirectoryReader,failDirectoryReader);
	} catch (e) {
		alert(dump(e));
	}
}
function successDirectoryReader(entries) {
    var i;
    $("#Explorer").html('');
    for (i=0; i<entries.length; i++) {
        if (entries[i].isDirectory) {
        	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='changePath(this)'/></div><div style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        } else {
        	var fileType = blackberry.io.file.getFileProperties(entries[i].fullPath).mimeType;
        	if (Left(fileType,5) == 'image') {
        		// if file is of type image, then show in small size
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='" + entries[i].fullPath + "' height='80px' width='80px' style='border:2px;' /></div><div  style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        	} else {
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/file.png' style='border:2px;' /></div><div>" + entries[i].name + "</div></div>");
        	}
        }
    }
    // add an option to go to parent directory
    if (currentPath != "file:///store") {
    	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='backPath()'/></div><div style='width:100px;word-wrap:break-word;'>..</div></div>");
    }
}
function failDirectoryReader(error) {
    alert("Failed to list directory contents: " + error.code);
}
function backPath() {
	currentPath = Left(currentPath, currentPath.lastIndexOf('/'));
	populate(currentPath); 
}
function changePath(ele){
	currentPath = currentPath + "/" + $(ele).parent().next().html();
	populate(currentPath);
}

//Error dump function
function dump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += dump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}

//String left function
function Left(str, n){
	if (n <= 0)
	    return "";
	else if (n > String(str).length)
	    return str;
	else
	    return String(str).substring(0,n);
}

Download full project from here

Published by Vikas

Techno Geek

Published

3 thoughts on “Create File Explorer in BlackBerry PhoneGap project”

  1. Hello,
    I try to try this project but i only find one screen has File Explorer in the top and nothing.
    could you help me ?

    Reply

  2. Hey, maybe you have an Idea to solve my problem …

    I search for a possibillity for the user of my app to choose a directory on my sd card. Until now I can’ t find a way. I just found the getdirectory class, but I don’ t know if it is what I looking for …

    My JavaScript Code:

    The code I used to try the getdirectory class:

    Chose
    Directory

    I use PhoneGap an jQuery Mobile and I want to publish my App unter Android, iOS and webOS. Would be great if you can help me …

    Reply

Leave a comment