In the last article we have discussed the Flags and the LocalFileSystem in PhoneGap. To read a file, we require a FileReader object. TheFileReader object is a way to read a file from the device's FileSystem. A file can be read as text, or as a Base64-encoded data string.
This object has the following properties.
- readyState : This is one of the three states (EMPTY, LOADING OR DONE), the reader can be in.
- result : This is used to get the content of the file that has been read.
- error : This is used for an object containing errors.
- onloadstart : This is called when we start reading.
- onload : This is called when the reading has successfully completed.
- onabort : This is called when the read has been aborted.
- onerror : This is called when the read has got failed.
- onloaded : This is called when the request has completed (either in success or failure).
This object has the following methods:
- abort.
- readAsDataUrl.
- readAsText.
abort
By using the abort() method, we can stop reading a file from the FileSystem as shown in the following code:
function success(file) {
var reader_file = new FileReader();
reader_file.onloadend = function (event) {
alert("read success");
alert(event.target.result);
};
reader_file.readAsText(file);
reader_file.abort();
}
function fail(error) {
console.log(error.code);
}
entry.file(success, fail);
readAsDataUrl.
Using the readAsDataUrl() method, we can read a file and return the data as Base64-encoded data, which is ideal for images and other binary files as shown in the following code:
function success(file) {
var file_reader = new FileReader();
file_reader .onloadend = function(evt) {
alert("read success");
alert(evt.target.result);
};
file_reader .readAsDataURL(file);
}
function fail(evt) {
console.log(error.code);
}
entry.file(success, fail);
ReadAsText
By using the ReadAsText() method, we can also read a file and return text, which is most suitable for TXT file as shown in the following code:
function success(file) {
var file_reader = new FileReader();
file_reader .onloadend = function(evt) {
alert("read success");
alert(evt.target.result);
};
file_reader .readAsDataURL(file);
}
function fail(evt) {
console.log(error.code);
}
entry.file(success, fail);
FULL EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readAsDataURL(file) {
var file_reader = new FileReader();
file_reader.onloadend = function (evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
file_reader.readAsDataURL(file);
}
function readAsText(file) {
var file_reader = new FileReader();
file_reader.onloadend = function (evt) {
console.log("Read as text");
console.log(evt.target.result);
};
file_reader.readAsText(file);
}
function fail(evt) {
console.log(evt.target.error.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read File</p>
</body>
</html>
Supported Platform:
- Android
- Blackberry WebWorks (OS 5.0 and higher)
- iOS
- Windows Phone 7 (Mango)
Resources:
some of the useful resources are:
Using Flags and LocalFileSystem in PhoneGap
Working With Networks in Windows Phone 7 Using PhoneGap
Media in PhoneGap
Events in PhoneGap