Create File Explorer in BlackBerry PhoneGap project


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

Advertisements