I’m trying to create a PhoneGap application for Android and iOS.
So far I’ve been succeeding to the extent that I’ve been able to access the LocalFileSystem on Android 2.2 and up.
On iOS (5 and 6), I’ve had no such luck unfortunately.
The FileReader and FileWriter examples fail to work as well.
I’ve spent some time debugging this using jsconsole.com and as far as I can tell window.requestFileSystem and window.webkitRequestFileSystem are both undefined.
Which would explain why I have issues with the file system.
I’m using Cordova 2.2.0 and XCode 4.5 for the iOS part.
Both the example and my own code is working on Android.
If any of you have any advice I’d really appreciate the positive effect it will have on my mental health!
Edit:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<a href="javascript:myfs.clicked()">click!</a>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="http://jsconsole.com/remote.js?secret-debug-key"></script>
<script type="text/javascript" src="js/filesystem.js"></script>
<script type="text/javascript">
var myfs;
document.addEventListener('deviceready', function() {
myfs = new FS();
myfs.initializeFileSystem();
});
</script>
</body>
</html>
filesystem.js:
var FS = (function()
{
var self = {};
self.initializeFileSystem = function()
{
window.requestFileSystem = window.webkitRequestFileSystem || window.requestFileSystem;
window.requestFileSystem(1, 0, self.gotFS, self.fail);
};
self.gotFS = function (fileSystem)
{
window.rootFS = fileSystem.root;
//create our cache directory if it does not exist
var entry = fileSystem.root;
entry.getDirectory("tempdirectory", {create: true, exclusive: false}, function() {console.log("directory already present or created");}, function(error) {console.log("Error creating directory " + error.code);});
};
self.fail = function()
{
console.log("requestFileSystem failed");
};
self.downloadImage = function(url, fileName, callback)
{
var ft = new FileTransfer();
var filename = fileName;
var callback = callback;
ft.download(
url,
window.rootFS.fullPath + "/" + filename,
function(entry)
{
if(callback!= undefined)
{
callback(entry);
}
},
function(error)
{
console.log("download error: " + error.code);
}
);
};
self.clicked = function()
{
//random test URL
var url = "http://www.embeddedpeople.dk/_/rsrc/1301663383918/home/ydelser/konsulentydelser/test/test.png?height=400&width=350";
self.downloadImage(url, "test.png", function(){console.log("download succesful");$('body').append('<img src="file:///data/data/dk.attention8.filesystem/test.png" />');});
return false;
};
return self;
}
);
This works on Android, after the click has been made, the file is downloaded and an img tag containing a reference to the path of the downloaded image should be inserted in the DOM.
I’m aware that this path isn’t valid on iOS nor the correct one on a device with an SDcard, but the issue is occuring before this img tag is added.
This image should show that the javascript code works in Android ( taken of the Android Emulator ). 
If you need further clarification or have questions I’ll provide them as fast as I can.
Thank you for your time!
I’ve finally resolved this issue.
I’ve had a common “www” folder that I’d transfer from my Android to my iOS project.
I’ve naively overwritten the entire www folder, and this has been causing the problem.
The cordova.js file in the root of the www folder is platform specific, and I had thusly used the Android cordova.js file in my iOS project, which obviously wasn’t working.
Thank you to fmertz on #phonegap for pointing me in the right direction.