javascript function can't find the element

Question

I need to call some file uploader JavaScript from code behind. The JavaScript is basically customizing the style of the file uploader control. However, the JavaScript function can't find the element. I get this from the inspector:

*o = {element: null, 
      action: "/Web/UploadHandler.axd?UploadID=55f3930c-6aa9-4201…ccfdfae6c6&ObjectID=145649&RelationshipTypeID=223", 
      sizeLimit: 209715

when it should look like this:

o = {element: div#uploadContent, action: "/Web/UploadHandler.axd?UploadID=c1829b40-7869-4f19…411e7a542c&ObjectID=151808&RelationshipTypeID=223", sizeLimit: 20971520, acceptTypes: "image/*", onSubmit: ƒ, …}
qq.extend

This is the code:

 div = new HtmlGenericControl("div") { ID = ("dlWrapper") };

 Literal litScript = new Literal();
 litScript.Mode = LiteralMode.PassThrough;
 div.Controls.Add(litScript);

 var imageUploader = (ImageUpload)CreateImageUploader(ActiveObject, p, litScript);
 div.Controls.Add(imageUploader);
 controls.Add(div);

 private static Control CreateImageUploader(ObjectInstance objectInstance, PropertyType propertyType, Literal litScript)
 {
     ImageUpload imageUpload = new ImageUpload (objectInstance, litScript) { ID = ControlFactory.GetControlId(ControlFactory.IMAGE_PREFIX, ControlFactory.PROPERTY_TYPE_PREFIX, objectInstance.Id, propertyType.Id), Width = Unit.Pixel(80), Height = Unit.Pixel(30) };
     PropertyInstanceValue piv = objectInstance.GetPropertyInstanceValue(propertyType.Id);           
     return imageUpload;
 }

 public class ImageUpload : FileUpload
 {
    public ObjectInstance ActiveObject {get; set; }
    public Literal litScript { get; set; }
    private string uploadID;
    private string accept = "image/*";
    public string UploadID
    {
        get
        {
            if (string.IsNullOrEmpty(uploadID))
            {
                uploadID = GetUploadID();
            }
            return uploadID;
        }
        set { uploadID = value; }
    }

    public ImageUpload(ObjectInstance activeObject, Literal literal)
    {
        ActiveObject = activeObject;
        litScript = literal;
    }

    public string GetUploadID()
    {
        string uploadID;
        if (HttpContext.Current.Session[EDM.Common.Definitions.SessionKey.UPLOAD_ID] != null)
        {
            uploadID = (string)HttpContext.Current.Session[EDM.Common.Definitions.SessionKey.UPLOAD_ID];
            HttpContext.Current.Cache.Remove("cacheFlashSessionID_" + uploadID);
            HttpContext.Current.Cache.Remove("cacheFlashAuth_" + uploadID);
        }
        uploadID = Guid.NewGuid().ToString();
        HttpContext.Current.Session[EDM.Common.Definitions.SessionKey.UPLOAD_ID] = uploadID;
        HttpContext.Current.Cache.Insert("cacheFlashSessionID_" + uploadID, HttpContext.Current.Session.SessionID, null, DateTime.Now.AddMinutes(20), Cache.NoSlidingExpiration, CacheItemPriority.NotRemovable, null);
        if (HttpContext.Current.Request.Cookies[FormsAuthentication.FormsCookieName] != null)
        {
            // ReSharper disable PossibleNullReferenceException
            HttpContext.Current.Cache.Insert("cacheFlashAuth_" + uploadID, HttpContext.Current.Request.Cookies[FormsAuthentication.FormsCookieName].Value, null, DateTime.Now.AddMinutes(20), Cache.NoSlidingExpiration, CacheItemPriority.NotRemovable, null);
            // ReSharper restore PossibleNullReferenceException
        }
        return uploadID;
    }

    protected override void OnLoad(EventArgs e)
    {
        Literal litScript = new Literal();
        ScriptManager scriptManager = ScriptManager.GetCurrent(Page);

        StringBuilder sb = new StringBuilder();
        sb.Append("<div id=\"uploadContent\"></div>");
        litScript.Text = sb.ToString();
        sb.Remove(0, sb.Length);
        sb.Append("<script type=\"text/javascript\">");
        int maxBytes = ProcessUnity.Common.Utility.GetMaxRequestLength() * 1024;
        sb.Append("var uploader = new qq.FileUploader({ element: document.getElementById('uploadContent'), action: '" + Context.Request.ApplicationPath + "/UploadHandler.axd?UploadID=" + UploadID + "&ObjectID=" + ActiveObject.Id + "&RelationshipTypeID=" + EDM.Common.Definitions.RelationshipTypeId.IMAGE_FILE + "', sizeLimit: " + maxBytes + ", acceptTypes:'" + accept + "', onSubmit: uploadStart, onComplete: uploadComplete, onError: uploadError, multiple: false });");
        sb.Append("</script>");

        if (scriptManager != null)
        {
            ScriptManager.RegisterClientScriptBlock(this, typeof(ImageUpload), Guid.NewGuid().ToString(), sb.ToString(), false);
        }
        else
        {
            Page.ClientScript.RegisterClientScriptBlock(typeof(Page), Guid.NewGuid().ToString(), sb.ToString());
        }
        base.OnLoad(e);
    }     

    private object GetScriptManager()
    {
        foreach (DictionaryEntry entry in Page.Items)
        {
            if (entry.Key.ToString().IndexOf("System.Web.UI.ScriptManager") >= 0)
            {
                return entry.Value;
            }
        }
        return null;
    }
}

Answer 1

It looks like you're expecting litScript here:

Literal litScript = new Literal();
litScript.Mode = LiteralMode.PassThrough;
div.Controls.Add(litScript);

To be modified by the OnLoad event:

protected override void OnLoad(EventArgs e)
{
    Literal litScript = new Literal();
    // ...
    StringBuilder sb = new StringBuilder();
    sb.Append("<div id=\"uploadContent\"></div>");
    litScript.Text = sb.ToString();
    // ...
    base.OnLoad(e);
}

But your OnLoad is constructing its own local Literal . Just because it has the same litScript name as the outer Literal doesn't mean that the two are related. In short, nothing is writing that div to the page.