Disabling Other Controls While Uploading

[Pat]

Hello!  I’ve been using the RadAsyncUpload control and it’s been working great.  Provided is an image of what my screen looks like.  As you can see, I’m using RadAsyncUpload’s ruBrowse button to both upload the files clientside and then force a postback in order to upload the images to the database serverside (one button does all).

However, circled are other controls I’m using on my site.  The problem is that when the client clicks “Upload Pictures,” and the files get uploaded clientside (as you can see with the green dots), it takes a little time to insert them into the database (serverside).  Currently, without the implementation of a wait cursor, the client is able to click any of the other controls on the page:

       -  (RadTabStrip)  Click the Entry Content tab which stops the uploading from happening.

       -  (Asp Buttons)  Click Save/Cancel, which leaves the client in a bad state.

       -  (RadAsyncUpload)  Click the “Upload Pictures” button again to upload more pictures.

I was wondering if there was any way to be able to disable other controls while the uploading is still happening?

[Pat]

function disableControls()
{
  document.getElementById('<%= SaveButton.ClientID %>').disabled = true;
  document.getElementById('<%= CancelButton.ClientID %>').disabled = true;
}

Seemed to have done the trick being called by the OnClientFilesSelected property for the RadAsyncUpload control.  I was able to disable the Save and Cancel buttons, any idea how to disable the Entry Content" tab (tab index 0) or the RadAsyncUpload button clientside?

Thanks again for the help.

- Pat

[Pat]

function disableControls()
{
  document.getElementById('<%= SaveButton.ClientID %>').disabled = true;
  document.getElementById('<%= CancelButton.ClientID %>').disabled = true;
  var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
  var entryTab = tabStrip.get_tabs().getTab(0);
  var picturesTab = tabStrip.get_tabs().getTab(1);
  entryTab.set_enabled(false);
  picturesTab.set_enabled(false);
}

Updated to disable both tabs.  Now just need to be able to disable RadAsyncUpload's upload button (if that's even possible)!  Any ideas?

Thanks again for the help.

-  Pat

[Bozhidar]

Hello Pat,

You can use the AsyncUpload's set_enabled() method. Here's for instance how you can disable the control once you've selected the files, and then enable it again, once you've uploaded them on the client:

<telerik:RadAsyncUpload
    OnClientFileSelected="fileSelected"
    OnClientFileUploaded="fileUploaded"
    TargetFolder="Images"
    ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>
<script type="text/javascript">

    function fileSelected(sender, args) {
        sender.set_enabled(false);
    }

    function fileUploaded(sender, args) {
        sender.set_enabled(true);
    }

</script>

 
Regards,
Bozhidar
the Telerik team

[Sujatha]

Hello,

I would like to use sender.set_enabled(false) to disable upload control while a file uploads.  But the problem I see is that the Cancel link to cancel the current file upload is also disabled when the sender.set_enabled is set to false.  Is there a way to enable Cancel link in this scenario?

Thanks.

[Princy]

Hi Sujatha,

Please try the below JavaScript to enable the cancel button.

JavaScript:

function fileSelected(sender, args) {
    $('.ruCancel').prop('disabled', false);
    sender.set_enabled(false);
}

Thanks,
Princy.

[Sujatha]

Thank you Princy.  That worked, except that I had to switch the two statements in the function.  You have to enable Cancel link after the control is disabled.

function fileSelected(sender, args) {

  sender.set_enabled(false);
  $('.ruCancel').prop('disabled', false);

}

[Sujatha]

Hello Princy,

The sender.set_enabled(false) statement in the above function is throwing an error in IE 11.  Here is the error

Unhandled exception at line 209, column 1 in http://localhost:63500/ScriptResource.axd?d=uWy-ZmVtqSIglIvyjfeaiHZByPYUOndsAQFedlGK_MJnzN0Q6zZkdj9WyOdBRhTdYvEGt9rC8VNZ_ZYdgKkCnU07snTcvy2glGQUngxa3kRBPJ78D-nxu1I6bT7QNATdCJcyqq6K9R_-IM-gFK_dialdYfzx7dV2qjf2zY5eWhc1&t=70e10205

0x800a138f - JavaScript runtime error: Unable to set property 'Index' of undefined or null reference

Here is the block of code generating the error.  The error is generated on this line,

f.fileInfo.Index=this._additionalFieldIndex;​
​
*******
},_appendStyledRow:function(e){this._currentIndex++;
if(!!this._uploadedFilesRendering){a(".ruInputs",this.get_element()).append(e);
}else{a(".ruInputs",this.get_element()).prepend(e);
}this._appendFakeInput(e.children("span")[0]);
return e;
},_appendFakeInput:function(e){if(!this._hideFileInput){var f=this._createInput("","ruFakeInput radPreventDecorate","text","-1");
a(f).attr("id",this.getID("fakeInput"));
f.size=this.get_inputSize()-1;
e.appendChild(f);
var i=this._createLabel(a(f).attr("id"));
e.appendChild(i);
}var j=this._appendSelectButton(e);
if($telerik.isSafari){var k=$telerik.getBounds(j).width;
var h=0;
if(!this._hideFileInput){h=$telerik.getBounds(f).width;
}var g=this._fileInput;
if(g&&(k+h)>0){g.style.width=(k+h)+"px";
}}},_markForDeletion:function(e){a(e).addClass("ruFileRemoved");
a(".ruUploadProgress, .ruRemove",e).css("display","none");
},_addUploadedFile:function(e,f){this._additionalFieldIndex++;
f.fileInfo.Index=this._additionalFieldIndex;
this._updateRowImage(e,"success");
a(e).data("fileInfo",f);
this._uploadedFiles.push(f);
this.updateClientState();
},_getProgressUrl:function(){return this._progressHandlerUrl;
},_getFileName:function(f){if($telerik.isIE||$telerik.isChrome||$telerik.isOpera){var e=f.lastIndexOf("\\");
if(e){f=f.substring(e+1);
}}return f;
************

Any help would be appreciated.

Thanks,
Sujatha

[Sujatha]

Any suggestions for the above posted issue? 

Thanks,
Sujatha

[Princy]

Hi Sujatha,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAsyncUpload OnClientFilesSelected="fileSelected" OnClientFilesUploaded="fileUploaded"
    MultipleFileSelection="Automatic" ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>

JavaScript:

function fileSelected(sender, args) {
    sender.set_enabled(false);
    $('.ruCancel').prop('disabled', false);
}
function fileUploaded(sender, args) {
    sender.set_enabled(true);
}

Thanks,
Princy.