asp.netajaxfile-uploadwebforms

How to Validate TextBox when AjaxFileUpload "Upload" Button is Clicked


Please know that I'm a complete noob without any kind of web dev experience. This also seems like something that would be wanted pretty frequently, so I very well might be missing something simple in my too-many hours of Googling.

I have a web form with some text boxes for user info and an AjaxFileUpload control. I want to check that a TextBox is filled in when the "Upload" button in the AdjaxFileUpload control is hit.

I'm successfully using the OnClientUploadCompleteAll of the upload control and a Java function that triggers and a hidden button to do some things after the upload.

I was hoping to use the OnClientUploadStart to do something similar for checking the TextBox. The commented code below are things I've tried after searching around for things, but with no joy. I'm also thinking there may not be a way to do this because when the JSUpldStart function fires the "Upload" button has already turned into a "Cancel" button in the upload control.

I've tried playing with some asp.net validation things but couldn't make those work. Again, noob, was probably missing something as I only had validation happening AFTER the upload and it was cancelling the post upload code that had been working. :o/

Thanks for reading.

<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 
    OnUploadComplete="AjaxFileUpload1_UploadComplete"
    OnClientUploadCompleteAll="JSUpldDoneAll"
    OnClientUploadStart="JSUpldStart"
    Width="50%" />

function JSUpldStart(sender, args) {
    /*alert("JSUPldStart")*/
    if (TxtUplBy.value == "") {
        alert("It's blank.")
        /*args.cancel(true);    Cancel is not a function*/
        //throw ("Please fill in name.");
        //return false;
        //args.set_cancel(True);        Error: True is not defined
        //args.set_cancel(true);        Error: set_cancel is not a function
        //args.set_cancel=true          Did absolutely nothing.
    }
}

Solution

  • I never was able to get the dang cancel to work for AjaxFileUpload, it always just continued and uploaded the file.

    I ended up pursuing Yuriy's idea above of disabling the AjaxFileUpload unless the field was filled in, and was able to get his code above working. The problem was that once a file was selected in the AjaxFileUpload disabling and enabling it made funky things happen, like the "Upload" button turning into a cancel button.

    I ended up putting the AjaxFileUpload in a panel and used the attached JavaScript routine to check the field, then used jquery .attr to set the disabled attributes on the panel, which makes it impossible to click on or tab to the AjaxFileUpload.

    For visual indication I overlapped a transparent div with alight gray color to "gray-out the AjaxFileUpload.

    If any of this is bad practice I'd be interested to know. As I mentioned at the beginning, I've never done anything like this before.

    Thanks to everyone for answering.