HTML5 FileReader: Could not convert JavaScript argument

Question

I got a strange error while trying to read a local file with FileReader (I am using Firefox 16.0.2):

[20:57:48.440] reader = new FileReader()
[20:57:48.453] [object FileReader]
--
[20:58:15.104] reader.onload= function(evt) {alert('ok');}
[20:58:15.114] (function (evt) {alert("ok");})
--
[20:58:32.162] reader.readAsText('test.txt');
[20:58:32.170] [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMFileReader.readAsText]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: Web Console :: <TOP_LEVEL> :: line 1"  data: no]

Any ideas of how to fix it?

In Chrome: var fr = new FileReader(); undefined fr.onload = function(e) {alert(e);}; function (e) {alert(e);} fr.readAsText('test.txt'); undefined — 11684
– 11684, Commented Oct 28, 2012 at 20:15
Okay, that isn't really readable. Try this is in Chrome: jsfiddle.net/eG8gc (free fiddle for you) — 11684
– 11684, Commented Oct 28, 2012 at 20:15
jsfiddle.net/eG8gc/1 is interesting too: the alert that is NOT in a callback gets called, so there are no errors, just the callbacks aren't called. — 11684
– 11684, Commented Oct 28, 2012 at 20:19

Maurice · Accepted Answer · 2012-10-28 20:30:55Z

A FileReader takes a File or Blob parameter. Not some kind of string that resembles a file name. The File comes from a drag/drop action of an input type=file.

See this html5rocks article for more details or the code below for reading images.

$(function () {
        if (Modernizr.draganddrop) {
            var dropTarget = $('#dropTarget').get(0);

            dropTarget.addEventListener('dragover', function (e) {
                e.preventDefault();
            });

            dropTarget.addEventListener('drop', function (e) {
                e.preventDefault();

                if (e.dataTransfer.files === undefined) {
                    // IE doesn't support file drops yet.
                    $('#dropTarget').text('Drag & Drop of files is not supported');
                    return;
                }

                $.each(e.dataTransfer.files, function () {
                    var file = this;
                    var reader = new FileReader();
                    reader.onload = function () {
                        $('<img>')
                            .attr('title', file.name)
                            .attr('src', this.result)
                            .css('width', '75%')
                            .appendTo('#images');
                    };
                    reader.readAsDataURL(file);
                });
            });
        }
        else {
            $('#dropTarget').text('Drag & Drop is not supported');
        }
    });

Collectives™ on Stack Overflow

HTML5 FileReader: Could not convert JavaScript argument

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related