Question

I am working on this app on the Chrome App Store. Evidently the File API changed, so I needed to implement FileReader to get the local URL of a file that is dropped onto the page.

function drop(evt) {

    v = evt.target.id;

    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    var f = files[0];

    var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              document.getElementById(v).src = e.target.result;
            };
          })(f);

   reader.readAsDataURL(f);
}

What I am trying to do is load the URL of a song that is dropped onto the page into an HTML5 Audio tag’s src attribute. I can’t figure out what I am doing wrong with this drop function.

Does anybody have any ideas?

Answer 1

The solution in the end was simple. You cannot test the File Reader API from a local file system. This creates an Security Error – caused by the empty file headers from the local file system. To fix it, simply test it on any web server.