FileReader read as DataUrl

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?

Isaac Lewis · Accepted Answer · 2011-08-19 20:32:27Z

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.

answered Aug 19, 2011 at 20:32

Isaac Lewis

1,1992 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ebidel · Accepted Answer · 2011-06-02 01:28:37Z

1

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.com/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
  };
}

answered Jun 2, 2011 at 1:28

ebidel

24.2k4 gold badges65 silver badges76 bronze badges

Collectives™ on Stack Overflow

FileReader read as DataUrl

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related