Html5 File Api Always Returns Datauri Of [object File]. What Am I Doing Wrong?

Today I have been attempting to make a thumbnail up loader which uses drag and drop and the file API. I feel as if i have got reasonably far. But the DataURI that is provided to be

Solution 1:

You're setting the FileReader's onloadend handler to the return value of handleReaderLoadEnd() rather than setting the callback and it passing the ecent. Instead, you want:

reader.onloadend = handleReaderLoadEnd;

....

function handleReaderLoadEnd(e) {
  $("#thumbnailPreview").empty().prepend('<img id="thumbnailPreviewImage">');
  $("#thumbnailPreviewImage").attr({src: e.target.result});
}