I write a module:

window.FileReader = (function () {

        var read = function (file) {
            var reader = new FileReader();

            reader.onload = function (e) {
                console.log(e.target);
            };

            // reader.readAsDataURL(file);
        };

        return {
            read: read
        };
    })();

but when I execute

FileReader.read()

it always warn me object is not function at var reader = new FileReader()

what's wrong with my code?

I write a module:

window.FileReader = (function () {

        var read = function (file) {
            var reader = new FileReader();

            reader.onload = function (e) {
                console.log(e.target);
            };

            // reader.readAsDataURL(file);
        };

        return {
            read: read
        };
    })();

but when I execute

FileReader.read()

it always warn me object is not function at var reader = new FileReader()

what's wrong with my code?

• javascript

• 1 html5rocks./en/tutorials/file/dndfiles/… There you have how to do it. – reixa Commented Mar 5, 2013 at 8:38

4 Answers 4

It's saying that because you've made FileReader not a function, you've replaced it with an object (which has a function called read). All globals are properties of the global object (window, on browsers), so by setting window.FileReader = { ... };, you're replacing the global FileReader function with your object.

You seem to be trying to use the File API. That being the case, you want to not call your global module object FileReader, as that's defined by the File API. Call it something more specific to you (here I'm using Foo as an obviously-nonsense example):

window.Foo = (function () {

    var read = function (file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
})();

// Usage:
Foo.read();

When you code this line:

var reader = new FileReader();

make sure you define FileReader function in you code as below.

window.FileReader = function(){
    ...
};

In you code, you only return an object and assign it to window.FileReader, not a function, see you code as below：

window.FileReader = (function () { ... return {}; })();

Hope it will help you.

By the time window.FileReader been assigned, the function read was not been called, thus var reader = new FileReader(); was not executed.

In fact, it is not executed until you call FileReader.read(). But at that time the value of FileReader inside the read function has already been replaced by your window.FileReader.

Moving var reader = new FileReader(); out of the function, which makes it been executed earlier will eliminate the error:

window.FileReader = (function () {
    var reader = new FileReader();

    var read = function (file) {
        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
})();

However, I don't think it's a good idea having variables, especially global variables, named the same as something from the system APIs. So I'd prefer T.J. Crowder's way: just change the name of the global variable.

You have defined FileReader as an object with a property read : Object {read: function} you should first of all define FileReader as a constructor function like this:

FileReader = function () {
    var read = function (file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target);
        };

        // reader.readAsDataURL(file);
    };

    return {
        read: read
    };
};

And then you can create an object from this:

var object = new FileReader();