evt.target.result is empty?

Question

For some reason, in the following code, evt.target.result is empty. Why is that?

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var file = evt.dataTransfer.files[0];

    handleFiles(file, evt.target);
}

function handleFiles(file, target) {
    loadSongAnimate();

    var reader = new FileReader();

    // init the reader event handlers
    reader.onloadend = handleReaderLoadEnd;

    // begin the read operation
    reader.readAsDataURL(file);
}

function handleReaderLoadEnd(evt) {
    alert('Passing this: ' + evt.target.result);
    document.getElementById('audioTagId').src = evt.target.result;
}

Answer 1

From the fine manual:

onloadend
Called when the read is completed, whether successful or not. This is called after either onload or onerror.

I suspect that you have an error condition. Add an onerror callback and have a look at what reader.error has to say. You might want to use separate onerror, onabort, and onload callbacks instead of onloadend:

onabort
Called when the read operation is aborted.

onerror
Called when an error occurs.

onload
Called when the read operation is successfully completed.

That might make it easier to handle the individual events.

---

In your comment you say that you're getting an "error 2", from the other fine manual:

Constant: SECURITY_ERR
Value: 2
Description: The file could not be accessed for security reasons.

So it looks like you getting a "permission denied" error.

Answer 2

I was editing and viewing the file over a local file:// protocol. When you are referencing a local file inside another local file, the blank headers in the referenced local file with throw security errors.

Lesson learned... always upload to a server for testing as well. Would have saved me hours of Googling, and lots of hair.