TypeError: Image is not a constructor

Question

I'm using Plupload to upload images and all was working fine until I refactored my code. It's basically the same, but for some reason Plupload fails and gives me

TypeError: Image is not a constructor

when I try to upload an image (error msg here) . Can anyone see what I'm doing wrong with my code? Plupload is starting and I can select image. It's when it tries to upload the image that it fails.

On my page, I have two areas where I can upload images.

var Image = {
    id: null,
    type: null,
    dropbox: null
};

ImageHandler = {
    settings:       {},
    image:          {},
    entityId :      null,       // ID of entity
    entity:         null,       // Entity type [store | brand | shmall | shguide]

    init: function(){
        var self = this;

        self.image.size             = { width:600,height:600,quality:80 };
        self.settings.url           = '';
        self.entityId               = lib.getEntityID(); // external function
        self.entity                 = $('.image-drop-box').data('entity-type');

        // For each image drop box area
        $('.image-drop-box').each(function(){
            var img             = jQuery.extend({}, Image);
            img.dropbox         = $(this);
            img.id              = img.dropbox.data('image-id');
            img.type            = img.dropbox.data('image-type');

            self.imageUpload(img);
            self.removeImageAction(img);
        });    
    },

    imageUpload : function(img) {
        var self = this;  // ImageHandler

        switch (self.entity){
            case 'guide':   self.settings.url ='/shguide/uploadImage'; break;
            case 'shmall':  self.settings.url ='/shmall/uploadImage'; break;
        }


        new plupload.Uploader({
            runtimes : 'html5',
            container: img.dropbox.prop('id'),
            drop_element: img.dropbox.prop('id'),
            browse_button : img.type + '-file-browser-button',
            url :  self.settings.url,
            flash_swf_url: "vendor/plupload/Moxie.swf",
            urlstream_upload: true,
            max_file_count: 10,
            dragdrop: true,
            multipart_params : {
                'imageType' : img.type,
                'id' : self.entityId
            },
            file_data_name: 'Gallery[filename]',
            filters : {
                max_file_size : '5mb',
                mime_types: [{ title : "Image files",   extensions : "jpg,jpeg,png" }]
            },
            resize: self.image.size, // Resize images on client side if we can
            init : {
                FilesAdded: function(up, files) {
                    up.start();
                },
                // Called when file has finished uploading
                FileUploaded: function(up, file, info) {
                    var response = $.parseJSON(info.response);
                    // Do stuff here
                    return false;
                }
            }
        }).init();

        (...)
    }
}

ImageHandler.init();

Answer 1

It looks like your variable Image is causing the problem(Assuming it is in the global scope). In such case your Image object is overriding the default Image constructor, now when some internal code is trying to create an image object using new Image() it is throwing the error.

Just rename your variable Image to something else.

var MyImage = {
    id: null,
    type: null,
    dropbox: null
};