Hi,


I am trying to write an Ajax Image preloader that reacts to the key event of a File Input control. When I try to debug the code in Firefox, it does show the the uploaded image source is referenced as expected but for some reason the image itself does not seem to appear and I would appreciate it if someone could please help me with information on how to fix this delimma. I have included my code below for your convenience.

thanks in Advance,

Dollarjunkie ( Javascript Newbie)


Code:
ImagePreload.ImagePreloadBehavior = function(element) 
{

    ImagePreload.ImagePreloadBehavior.initializeBase(this, [element]);
    // TODO : (Step 1) Add your property variables here
    //
    this._TargetImageIDValue = null; // Change TargetButtonID to TargetImageButtonID
    this._FileUploadTextValue = null;
    this._FileTypesValue = ["bmp","gif","png","jpg","jpeg"];
    this._MaxWidthValue = 300;
    this._MaxHeightValue=250;
    this._DefaultImageValue ='/images/spacer.gif';

}

ImagePreload.ImagePreloadBehavior.prototype = 
{

    initialize : function() 
    {
        ImagePreload.ImagePreloadBehavior.callBaseMethod(this, 'initialize');

   $addHandler(this.get_element(), 'keyup',Function.createDelegate(this, this._onkeyup));
    this._onkeyup();
        // TODO: add your initalization code here
    },

  _onkeyup : function() 
    {
        var e = $get(this._TargetImageIDValue);// Get the ID of the image that we want to work with
        
        if (e) // There is an image Object Specified for this transaction
        {
            var NoFileUploadSource = ("" == this.get_element().value);//Boolean value TRUE OF FALSE IN THIS CASE for the value of the FILEUPLOAD BUTTON
            
            //e.visible = DefaultImageSpecified;// SET THE VALUE OF THE Image TO THE RETURNED BOOLEAN 
            
           if (this._DefaultImage) // IF THIS RESOLVES TO TRUE
           {
                if (NoFileUploadSource) //IF DISABLED EARLIER 
                {
                    this._oldValue = e.src;
                    e.src = this._DefaultImageValue;
                } 
                else 
                {
                    if (this._oldValue) 
                    {
                        e.src = this._oldValue;
                    }
                }
           }
         
           if( !NoFileUploadSource)
             {
                 var source=this.get_element().value;//get the name of the file
         
                 var ext= source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
             
                 var extArray = this._FileTypesValue;
                  
                   for (var i=0; i<extArray.length; i++) if (extArray[i]==ext) break;
  
                    //globalPic = new Image();
                   if (i < extArray.length)
                   { 
                   //3) IF a VALID IMAGE IS SPECIFIED, IMAGE SHOULD LOAD THE IMAGE
                      e.src=source;
                   }
                   else 
                   {
                       e.src=this._DefaultImageValue;
  
                   // 2) If an Invalid picture if specified, IMAGE SHOULD BE DISABLED AND An ALERT DISPLAYED 
                   alert("THAT IS NOT A VALID IMAGE\nPlease image with one of the following extentions :\n\n"+this.Filetypes.join(", "));
                  }
                
                   var x = parseInt(e.width);
                   var y = parseInt(e.height);
                if (x > this._MaxWidth) 
                  {
                      y*=this._MaxWidth/x;
                      x=this._MaxWidth;
                  }
                
                if (y> this._MaxHeight) 
                  {
                  x*= this._MaxHeight/y;
                  y= this._MaxHeight;
                  }
         
                e.style.display=(x<1 || y<1)?"block":"";
            }            
           
        }
        else
        {
        // alert coder that image object is missing
        alert("Please specify an image object to be used for the previewing");
        }
    },
    



    dispose : function() {
        // TODO: add your cleanup code here

        ImagePreload.ImagePreloadBehavior.callBaseMethod(this, 'dispose');
    },

    // TODO: (Step 2) Add your property accessors here
    //
    //Property for the TargetImageIDValue
    get_TargetImageID : function() 
    {
        return this._TargetImageIDValue;
    },

    set_TargetImageID : function(value) 
    {
        this._TargetImageIDValue = value;
    },
    
    //Properties for the 
      get_FileUploadText : function() 
    {
        return this._FileUploadTextValue;
    },

    set_FileUploadText : function(value) 
    {
        this._FileUploadTextValue = value;
    },
    
    //Acceptable File Types 
      get_FileTypes : function() 
    {
        return this._FileTypesValue;
    },

    //MaxWidth of images to Load 
      get_MaxWidth : function() 
    {
        return this._MaxWidthValue;
    },

    set_MaxWidth : function(value) 
    {
        this._MaxWidthValue= value;
    },
    
    //Set MaxHeight for images to load 
      get_MaxHeight : function() 
    {
        return this._MaxHeightValue;
    },

    set_MaxHeight : function(value) 
    {
        this._MaxHeightValue = value;
    },
    
    // The Default Picture to Load when there is No picture available 
      get_DefaultImage : function() 
    {
        return this._DefaultImageValue;
    },

    set_DefaultImage : function(value) 
    {
        this._DefaultImageValue = value;
    },
    
}