ClientSide control of RadAsyncUpload visibility

2 posts, 1 answers
  1. Jacob cheriathundam
    Jacob cheriathundam avatar
    3 posts
    Member since:
    Jun 2007

    Posted 26 Aug 2013 Link to this post

    Based on some business rules on my form, I'd like to be able to disable/enable the RadAsyncUpload control on the client side.  Essentially, based on values entered by the user, the RadAsyncUpload control should either allow or disallow further uploads.  The one caveat is that if a user uploads files before the RadAsyncUpload control is disabled, those files SHOULD be uploaded when the page posts back.

    I have tried using the set_enabled method, which does in fact disable/enable the control, however, if the control is disabled when the user submits the page, it seems like the FileUploaded server side event doesn't happen (the files are transported to the temporary folder, but the UploadedFiles parameter will be 0 and the FileUploaded event will not fire).

    I've also tried disabling the "select" button of the control but "click" events in the telerik upload area still allow for browsing so disabling the button didn't really do anything for me. 

    Any suggestions? 
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Aug 2013 Link to this post

    Hi Jacob,

    If you are disabling the control using the set_enabled(false) method, then the uploaded files wont be accessible and hence the server side OnFileUploaded event wont fire which is the default behavior. Here is an approach I tried to fire the OnFileUploaded event for your scenario. Please have a look at the following code I tried.

    ASPX:
    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic"
        TargetFolder="~/Images/Img/" AllowedFileExtensions=".jpg,.zip" PostbackTriggers="RadButton2"
        OnFileUploaded="RadAsyncUpload1_FileUploaded">
    </telerik:RadAsyncUpload>
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" Text="Disable Control" AutoPostBack="false"
        OnClientClicked="disableAsyncupload">
    </telerik:RadButton>
    <telerik:RadButton ID="RadButton2" runat="server" Text="Upload" OnClientClicked="OnClientClicked"
        OnClick="RadButton2_Click">
    </telerik:RadButton>
    <asp:HiddenField ID="HiddenField1" runat="server" />

    JavaScript:
    <script type="text/javascript">
        function disableAsyncupload() {
            var radasyncupload = $find('<%=RadAsyncUpload1.ClientID %>');
            radasyncupload.set_enabled(false);
            document.getElementById("HiddenField1").value = "disabled";
        }
     
        function OnClientClicked() {
            var radasyncupload = $find('<%=RadAsyncUpload1.ClientID %>');
            //explicitly enabling the control temporarily for upload purpose.
            if (radasyncupload.get_enabled() == false) {
                radasyncupload.set_enabled(true);
            }
        }
    </script>

    C#:
    protected void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
    {
        string targetfolder = RadAsyncUpload1.TargetFolder;
        e.File.SaveAs(Path.Combine(Server.MapPath(targetfolder), e.File.FileName));
    }
    protected void RadButton2_Click(object sender, EventArgs e)
    {
        //disabling the control based on hidden field value
        if (HiddenField1.Value == "disabled")
        {
            RadAsyncUpload1.Enabled = false;
        }
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top