TypeError: Image is not a constructor

jquery, plupload

Solution

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
};

Problem

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(); ```

Original source