"Unhandled Exception: $get("imgUpload") is null"

Question

I am using a asyncfileUpload control in my page, and that page is derived from a master page. My motive to use this control is only to upload an image and show that image on the same page. But when i am trying to upload an image, i am getting an Exception i.e.: "Unhandled Exception: $get("imgUpload") is null". I am using the following function on ClientUploadComplete:

<script type="text/javascript">
     function uploadComplete(sender, args) {
         var FileName = args.get_fileName();
         $get("imgUpload").src = "../ajax/upload/" + FileName;
     }
</script>

and i have also set the ClientIDMode=AutoID.

And i am using the following code under the UploadedComplete event:

 protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    string strPath = MapPath("~/ajax/upload/") + Path.GetFileName(e.FileName);
    AsyncFileUpload1.SaveAs(strPath);
    imgUpload.ImageUrl = strPath;
}

In a normal page, when I try the above It is working correctly but in case of Derived page (from Master Page) it is arising the exception.

Please help me out here to fix this problem.

With Regards, Ravindra Kumar

Answer 1

AutoID will rename the control based on rendering order, so when the master page is added in, it changes everything. Have you taken a look at your rendered source to verify the rendered control id? Try changing ClientIDMode to "Static"