Question

I’m using a FileUpload component on my ASP.NET 4.0 page, and I also have a button to start the actual upload of the file.

Now it would be really nice if I could have that Upload button disabled, until a valid file has been chosen in the FileUpload control – but I can’t seem to find any way of doing this.

I’m no client-side scripting guru – but I’m wondering if I could possibly hook up some Javascript “voodoo” to detect that a file has been chosen in the FileUpload component, and then enable the Upload button on the page.

Has anyone done this already? If so: how exactly did you do this? I am stumped and cannot see the forest for the trees…

Answer 1

The FileUpload has a value property you can use…

function ValidateUpload()
{
  var fuData = document.getElementById('fuUploadControl');

  if (fuData.value == '')
  {
       return false;
  }
  else
  {
       document.getElementById('btnSubmit').style.display = "";
  }
  return true;

}

I run this function from a CustomValidator (used to validate my FileUpload control)…
If validation succeeds (e.g. there is a file selected) the button will be shown (it starts invisible by default)

ASPX code:

<asp:FileUpload ID="fuUploadControl" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Upload" 
            OnClick="btnSubmit_Click" Style="display: none;" />
<asp:CustomValidator ID="CustomValidator1" runat="server"   
                     ControlToValidate="fuUploadControl"
                     ClientValidationFunction="ValidateUpload" />