[CB-12330] FileReader and FileWriter performance

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: 6.4.0
• Component/s: cordova-plugin-file

Environment

Android & IOS

• Assignee: Unassigned
• Reporter: Daniel Inston
• Created: 06/Jan/17 22:15
• Updated: 06/Jan/17 22:15

Description

I'm using Cordova for an IOS/Android/Chrome music streaming app. I need to store media files on the target device. These files are at least 5mb each.

I've been using the Cordova file plugin to write and read (and manipulate) these files using javascript.

I find the performance of the Cordova File plugin's 'FileReader' and 'FileWriter' to be inadequate. The standard example code (where you create a FileReader object, then read, wait for the reader.onloadend) to read a file of 5mb takes a minimum of 3 seconds. This is on modern hardware (both IOS (IPOD touch device) and Android (Amlogic S912). On a PC running chrome, with HTML5 FileSystem API code - this same procedure takes milliseconds.

The Cordova FileWriter has the same results.

I was able to fix my FileReader results by using an XMLHttpRequest to the file stored within the file system. This reads the same files (5mb) in well under a second. This tells me there is a problem with the Cordova plugin code. But I can't find any way to improve my 'FileWriter' performance. I've experimented with writing files in chunks, rather than all at once (various sized chunks, 0.1mb - 1mb) - but this hasn't helped.

Has anyone else had problems with this? It just doesn't seem right. I'm running Cordova version 6.4.0. Cordova-Plugin-File is 4.3.0

Here's some sample code for the FileReader:

Here's the Cordova way (3 seconds + for a 5mb file):

function ReadFile_APIWay(pathEntry, fileName, success, error) {
console.log("read file with api start: " + new Date());
_fs.root.getFile(AppendForwardSlash(pathEntry.fullPath) + fileName,

{ create: false }

, function (entry) {
entry.file(
function (file) {
var reader = new FileReader();
reader.onloadend = function ()

{ console.log("read file with api finish: " + new Date()); var result = this.result; success(result, entry); }

;
reader.readAsArrayBuffer(file);
}, function (e)

{ console.log("read file with api fail: " + e); error(e); }

);
}
, function (e)

{ console.log("read file with api fail: " + e); error(e); }

);
}
And Here's the AJAX way (fraction of a second for a 5mb file)

function ReadFile_AJAXWay(pathEntry, fileName, success, error) {

console.log("read file with ajax start: " + new Date());
var xhr = new XMLHttpRequest();
xhr.open('GET', AppendForwardSlash(pathEntry.toURL()) + fileName, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function (e) {
if (this.status == 0) {
console.log("read file with ajax finish: " + new Date());
var result = e.target.response;
_fs.root.getFile(pathEntry.fullPath + fileName,

{ create: false }

, function (entry)

{ success(result, entry); }

, function (e)

{ error(e); }

);
}
};
xhr.onerror = function (e)

{ console.log("read file with ajax fail: " + e); error(e); }

xhr.send();
}