CODEWITHSUNDEEP
javascripteventsmodule
RegarBoy
RegarBoy

Reputation: 3521

Calling events in modular JavaScript

I'm only learning how to work with the modules in JavaScript, so I have three separate .js files: main, listener and fileHandler

Simply this is a program that for every selected or dropped file(image) from computer gets appended to the page. Functions are working when I drag and drop files to the page, but when I select them through inputBox button files even files are stored in inputBox.files, they are not getting appended to the page.

var uploader = {};

uploader.init = function () {
    this.inputBox = document.getElementById('uploadButton');
    this.dropbox = document.getElementById('dropbox');
    this.listener();
}

and listener method as:

probably I'm calling 'change' event wrongly here, that files are not appended.

uploader.listener = function () {
    uploader.inputBox.addEventListener('change', uploader.fileHandler.addFiles(uploader.inputBox.files));
    this.dropbox.addEventListener('drop', this.fileHandler.drop.bind(this));
}

one another constructor is: 

uploader.fileHandler = new function () {
    var uploadHandler = function () {...}
    this.addFiles = function (files) {
        Object.keys(files).forEach(function (key) {
            var file = files[key];
            uploadHandler(files[key]);
        });
    };
    this.drop = function (event) {
        event.stopPropagation();
        event.preventDefault();
        var files = event.dataTransfer.files;
        this.fileHandler.addFiles(files);
    };
}

Upvotes: 0

Views: 562

Answers (1)

jfriend00
jfriend00

Reputation: 707716

EDIT

I see another issue. When you do this:

uploader.inputBox.addEventListener('change', uploader.fileHandler.addFiles(uploader.inputBox.files));

You are calling uploader.fileHandler.addFiles(uploader.inputBox.files) immediately and passing it's return value to .addEventListener(). Probably what you want instead is this:

uploader.inputBox.addEventListener('change', function() {  
    uploader.fileHandler.addFiles(uploader.inputBox.files)
});

Here you are passing an anonymous function reference which can be called later by the event handler.

This construct:

uploader.fileHandler = new function () {
    this.addFiles = function (files) {
        Object.keys(files).forEach(function (key) {
            var file = files[key];
            uploadHandler(files[key]);
        });
    };
}

only assigns a function to uploader.fileHandler. It does not define uploader.fileHandler.addFiles until you actually call that function (which you do not show).

I don't know why you're trying to nest your function definitions (that usually just causes more complexity than benefit in Javascript), but if you really wanted to define them that way, you could do this:

uploader.fileHandler = {
    addFiles: function (files) {
        Object.keys(files).forEach(function (key) {
            var file = files[key];
            uploadHandler(files[key]);
        });
    },
    drop: function(...) {...}
};

This would then define both of these functions:

uploader.fileHandler.addFiles()
uploader.fileHandler.drop()

Upvotes: 1

Related Questions