HTML5 Filereader and SQL Database Crashes Chrome

I'm not sure if I'm using incorrect syntax, but I am unable to read an HTML5 Web SQL database BLOB entry into a DataURL using the HTML5 Filereader API.

Here, try it for yourself on Chrome Dev Channel: http://austin.99k.org/index.html

Choose multiple files, then inspect the page and go to storage. You'll see that a database has been created with the files inside. Now, refresh the page and click on one of the files that are listed. Chrome will crash at this point. Have a look at the source to see what's going on when you click the file's name.

<!DOCTYPE html> 
<html> 
<head> 
<title>Player</title> 
<meta charset="utf-8"/> 
</head> 
<body> 

<input type="file" id="files" name="files[]" multiple /> 
<br> 
<div style="width: 500px;height:500px;" id="data"></div><div id="player"></div> 

<script type="text/javascript"> 

var DB_NAME = "audio";
var DB_VERSION = "1.0";
var DB_TITLE = "Stores audio file information";
var DB_BYTES = 50000000;
var db = window.openDatabase(DB_NAME, DB_VERSION, DB_TITLE, DB_BYTES);
if (!db) {
alert("Failed to connect to database.");
}
db.transaction(

function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS files (id INT PRIMARY KEY, name TEXT, data BLOB)", [], function (result) {}, function (tx, error) {
    alert("Error Creating table:" + error.message);
});
tx.executeSql('SELECT * FROM files', [], function (tx, results) {
    var len = results.rows.length,
        i;
    for (i = 0; i < len; i++) {
        document.getElementById("data").innerHTML += "<span onClick='clicked(this)'>" +     results.rows.item(i).name + "</span><br>";
    }
});
});

function insert() {
filecount = filecount + 1;
file = files[filecount];
id = localStorage.getItem("id");
parsed = parseFloat(id);
localStorage.setItem("id", parsed + 1);
db.transaction(

function (tx) {
    tx.executeSql("INSERT INTO files (id, name, data) VALUES (?, ?, ?)", [parsed, file.name, file], function (result) {
        if (filecount < files.length - 1) {
            insert();
        }
    }, function (tx, error) {
        alert("Error inserting:" + error.message);
    });
});
}


function handleFileSelect(evt) {

window.filecount = -1;
window.files = evt.target.files;
if (!localStorage.getItem("id")) {
    localStorage.setItem("id", "0");
}
insert();
}

function clicked(obj) {

getFile(obj.innerHTML);
}

function getFile(name) {

db.transaction(

function (tx) {
    tx.executeSql('SELECT * FROM files WHERE name="' + name + '"', [], function (tx,   results) {
        var len = results.rows.length,
            i;
        for (i = 0; i < len; i++) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("player").innerHTML = "<audio src='" + e.target.result + "' controls></audio>";
            };
            reader.readAsDataURL(results.rows.item(i).data);

        }
    });

});
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script> 

</body> 
</html>

ansaurus

tags:

views:

answers:

HTML5 Filereader and SQL Database Crashes Chrome

related questions