FileReader
The FileReader
allows basic access to a file.
Properties
-
readyState: One of the reader's three possible states, either
EMPTY
,LOADING
orDONE
. -
result: The contents of the file that have been read. (DOMString)
-
error: An object containing errors. (FileError)
-
onloadstart: Called when the read starts. (Function)
-
onload: Called when the read has successfully completed. (Function)
-
onabort: Called when the read has been aborted. For instance, by invoking the
abort()
method. (Function) -
onerror: Called when the read has failed. (Function)
-
onloadend: Called when the request has completed (either in success or failure). (Function)
NOTE: The following porperty is not supported:
- onprogress: Called while reading the file, reporting progress in terms of
progress.loaded
/progress.total
. (Function)
Methods
-
abort: Aborts reading file.
-
readAsDataURL: Read file and return data as a base64-encoded data URL.
-
readAsText: Reads text file.
-
readAsBinaryString: Reads file as binary and returns a binary string.
-
readAsArrayBuffer: Reads file as an
ArrayBuffer
.
Details
The FileReader
object offers a way to read files from the device's
file system. Files can be read as text or as a base64 data-encoded
string. Event listeners receive the loadstart
, progress
, load
,
loadend
, error
, and abort
events.
Supported Platforms
- Amazon Fire OS
- Android
- BlackBerry WebWorks 5.0+
- iOS
- Windows Phone 7 and 8
- Windows 8
readAsDataURL
Parameters:
- file: the file object to read.
Quick Example
function win(file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
console.log("read success");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
};
var fail = function (error) {
console.log(error.code);
};
entry.file(win, fail);
readAsText
Parameters:
-
file: the file object to read.
-
encoding: the encoding to use to encode the file's content. Default is UTF8.
Quick Example
function win(file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
console.log("read success");
console.log(evt.target.result);
};
reader.readAsText(file);
};
var fail = function (error) {
console.log(error.code);
};
entry.file(win, fail);
abort
function win(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("read success");
console.log(evt.target.result);
};
reader.readAsText(file);
reader.abort();
};
function fail(error) {
console.log(error.code);
}
entry.file(win, fail);
Full Example
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
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 readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
};
reader.readAsText(file);
}
function fail(error) {
console.log(error.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Read File</p>
</body>
</html>
iOS Quirks
- The encoding parameter is not supported, and UTF8 encoding is always in effect.
readAsBinaryString
Currently supported on iOS and Android only.
Parameters:
- file: the file object to read.
Quick Example
function win(file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
console.log("read success");
console.log(evt.target.result);
};
reader.readAsBinaryString(file);
};
var fail = function (error) {
console.log(error.code);
};
entry.file(win, fail);
readAsArrayBuffer
Currently supported on iOS and Android only.
Parameters:
- file: the file object to read.
Quick Example
function win(file) {
var reader = new FileReader();
reader.onloadend = function (evt) {
console.log("read success");
console.log(new Uint8Array(evt.target.result));
};
reader.readAsArrayBuffer(file);
};
var fail = function (error) {
console.log(error.code);
};
entry.file(win, fail);