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?

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?

• javascript
• html
• google-chrome
• google-chrome-extension
• fileapi

Share Improve this question Follow asked May 31, 2011 at 20:45 Isaac LewisIsaac Lewis 1,19922 gold badges1515 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

Hmm, this looks right to me. What is the current behavior? You're attaching the drop event to the audio element itself? You can get rid of the closure, since you're only using the first file and not looping through the FileList

Here's a similar DnD file snippet (it uses images instead of an src): http://www.html5rocks./tutorials/file/dndfiles/#toc-selecting-files-dnd

As an alternative, you could use a blobURL:

window.URL = window.URL || window.webkitURL;

function drop(evt) {
  ...
  var file = evt.dataTransfer.files[0];
  ...
  audio.src = window.URL.createObjectURL(file);
  audio.onload = function(e) {
    window.URL.revokeObjectURL(this.arc); // clean up
  };
}