Problems with ImageUpload (AjaxControlToolKit and AsyncFileUpload)

Question

I have problems with my imageuplad using AjaxControlToolKit. I can upload files and display them without postback but If the user changes his mind and uploads another image it still dispays the first image.Help would be appreciated.

This is my code: Front:

<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

    <script type="text/javascript">
        function uploadComplete(sender, args) {
            var pathForUploadedImage = $('#uploadedHiddenField').val();                               
            $get("uploadImageImg").src = $('#uploadedHiddenField').val();
            $(".uploadImage").fadeIn(100);

        }
</script>

<asp:Image id="uploadImageImg" class="uploadImage" alt="" runat="server" ClientIDMode="Static" />
<div id="uploadedImageDiv"></div>
<asp:Image ID="loader" runat="server" ImageUrl="~/library/images/loading.gif" Style="display: None" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="uploadComplete" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" CompleteBackColor="white" />
<asp:HiddenField ID="uploadedHiddenField" ClientIDMode="Static"  runat="server"/>

And Back:

 protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {

        try
        {

            Styling.SetupStyles();
            string virualFolder = "";
            if (string.IsNullOrEmpty(UploadDirectory))
            {
                virualFolder = "/" + Styling.GetStyleValue("customNewsImagesFolder", "") + "/";
            }
            else
            {
                virualFolder = "/" + Styling.GetStyleValue(UploadDirectory, "") + "/";
            }



            string fileExtension = Path.GetExtension(e.FileName);

            int fileSize = Convert.ToInt32(e.FileSize);

            string physicalFolder = Server.MapPath(virualFolder);

            string randomFileName = System.IO.Path.GetRandomFileName().Replace(".", "");

            bool isUnique = true;
            DirectoryInfo dir = new DirectoryInfo(MapPath(virualFolder));
            FileInfo[] files = dir.GetFiles();
            foreach (FileInfo myFile in files)
            {
                if (myFile.Name == randomFileName)
                {
                    isUnique = false;
                }
            }

            IsAllowedFileExtension(fileExtension);

            bool error = false;

            if (!isUnique)
            {
                error = true;
                ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>alert('En fil med detta namn finns redan, var vänlig och döp om din fil');</script>", false);
            }
            else if (!IsAllowedMaxFileSize(fileSize))
            {
                error = true;
                ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>alert('Filen är för stor, vänligen försök igen med en fil som är mindre än 2 MB');</script>", false);
            }
            else if (!IsAllowedFileExtension(fileExtension))
            {
                error = true;
                ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>alert('Felaktigt filformat, vänligen försök igen med en fil av följande typ: .jpg .jpeg .png .gif');</script>", false);
            }

            if (!error)
            {
                AsyncFileUpload1.SaveAs(physicalFolder + randomFileName + fileExtension);
                string thePath = (virualFolder + randomFileName + fileExtension).Replace("\\", "/");

                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "filePath", "top.$get(\"" + uploadedHiddenField.ClientID + "\").value = '" + thePath + "';", true);                

            }
        }
        catch (Exception ex)
        {
            erLog.LogException(ex, System.Reflection.MethodBase.GetCurrentMethod().Name);
        }
    }

    private bool IsAllowedFileExtension(string fileExtension)
    {
        bool valid = false;
        if (fileExtension.ToLower() == ".jpg" || fileExtension.ToLower() == ".jpeg" || fileExtension.ToLower() == ".gif" || fileExtension.ToLower() == ".png")
            valid = true;
        return valid;
    }

    private bool IsAllowedMaxFileSize(int fileSize)
    {
        bool valid = false;
        if (fileSize < 2100000)
            valid = true;
        return valid;
    }

I think the problem has to do with that I'm displaying the image with the "ScriptManager.RegisterClientScriptBlock"-row but it doesnt seem to register the script if its already in the DOM.

Answer 1

You didn't specify if your AsyncFileUpload1_UploadedComplete event handler is inside control or page. If it inside control than to fix your problem you can try to register client script using instance of the page. Other option is to generate unique script id every partial postback.

Option 1 (register client script with page instance):

ScriptManager.RegisterClientScriptBlock(this, this.Page, "filePath", "top.$get(\"" + uploadedHiddenField.ClientID + "\").value = '" + thePath + "';", true);

Option 2 (generate unique script id every partial postback):

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), Guid.NewGuid().ToString(), "top.$get(\"" + uploadedHiddenField.ClientID + "\").value = '" + thePath + "';", true);