Enabling a button on AsyncFileUpload upload complete

Question

This is the scenario : I have a screen that has a AsyncFileUpload and a button on it. Now the problem is that an error pops up if the user clicks the button before the file is finished uploading so what I want to achieve is to disable the button on page load and as soon as the file's upload is complete it has to make the button visible again. Now I've went through problems and solutions on the web and what I could make out is that the button is processed on the server side so I can't use javascript to do this. So when I do it in the code behind of the screen it disables the button successfully but it doesn't enable it successfully after the file upload is complete. The assumption that I have is because that no postback takes place and the button does not appear to be enabled because no screen refresh has taken place.

How do I get past this and how do I get that button to enable after the file upload is complete?

Here is what I have so far, it isn't much code but here it is anyway: BulkInsert.aspx

  <%@ Page AspCompat="true" Title="MainPage" MasterPageFile="~/MasterPage.master"       Language="C#"
AutoEventWireup="true" CodeFile="InventoryBulkInsert.aspx.cs" Inherits="content_inventory_InventoryBulkInsert" %>

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

 <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<table border="0" class="tablebody" width="100%">
   <tr>
        <td class="title" colspan="2">
            Bulk insert
        </td>
    </tr>

    <tr>
        <td class="headercell" colspan="2">
            File Upload
        </td>
    </tr>




    <tr>
        <td class="style1">
            File
        </td>
        <td class="style2" style="height: 26px">
            <asp:AsyncFileUpload ID="AsyncUpload" runat="server" OnUploadedComplete="AsyncUpload_UploadedComplete"
                OnClientUploadComplete="UploadComplete" OnUploadedFileError="AsyncUpload_UploadedFileError"
                colspan="1" />
        </td>
    </tr>
    <tr>
        <td class="style1">
        </td>
        <td align="left">
            <asp:Button runat="server" ID="btnImport" Text="Import" BackColor="#990000" ForeColor="White"
                nowrap Width="214px" OnClick="btnImport_Click"  />
        </td>
    </tr>

BulkInsert.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        this.btnImport.Enabled = false;

    }
  }


 protected void AsyncUpload_UploadedComplete(object sender,    AjaxControlToolkit.AsyncFileUploadEventArgs e)
 {
    this.btnImport.Enabled = true;
 }

Answer 1

I would suggest using javascript only for showing the button, you will not use it in processing. You can use the AjaxFileUpload OnClientUploadComplete="UploadComplete" which is already included in your design, it would achieve your goal perfectly.

Create the function like this in markup:

   function UploadComplete(sender, args) {
       var control = document.getElementById("<%=btnImport.ClientID%>");
       control.style.display = "block";

   }
</script>

And then modify your button to have style="display:none"