Enable button when loading AsyncFileUpload

Question

This is the scenario: I have a screen that has AsyncFileUpload and a button on it. Now the problem is that the error appears if the user presses the button before the file completes the download, so I want to disable the button on the page load, and as soon as the file download is complete, it should make the button visible again. Now I ran into problems and solutions on the Internet, and I could understand that the button is being processed on the server side, so I cannot use javascript for this. Therefore, when I do this in the code behind the screen, it successfully disables the button, but after the file has finished loading, it does not turn on successfully. The assumption that I have is that there is no postback, and the button does not appear because the screen update did not happen.

How can I get past this and how can I turn on this button after the file upload is complete?

Here is what I still have, it is not a lot of code, but it doesn’t matter here: 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 to display the button, you will not use it when processing. You can use AjaxFileUpload OnClientUploadComplete="UploadComplete", which is already included in your design, it will achieve the goal entirely.

Create such a function in the markup:

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

   }
</script>

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