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

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.