Why cant I disable ajaxToolkit:AsyncFileUpload

Question

Iv tried many things (JS/Jquery) to disable this AsyncFileUpload but none are working...please advise..

    <ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
                                    OnClientUploadComplete="ajaxUploadImage_ClientUploadComplete" runat="server"
                                    ID="ajaxUploadImage" Width="400px" UploaderStyle="Modern"
                                    CompleteBackColor = "White"
                                    UploadingBackColor="#CCFFFF"  ThrobberID="imgLoader"
                                    OnUploadedComplete = "ajaxUploadImage_OnUploadComplete" 
                                     OnClientUploadStarted="AssemblyFileUpload_Started" 
                                  />

var upload = $$('ajaxUploadImage');
        upload.enableSelection('false');

var upload = $$('ajaxUploadImage');
        upload.enableSelection('false');
upload.disableSelection();

document.getElementById("ctl00_MainContent_MapUserControl_ajaxUploadImage").disabled = true;

So...iv tried using the ID assigned by me..iv tried using the ID assigned in the browser....what am I doing wrong? user can still click of the text box or the select button and the pictures folder pops up, allowing the user to select an image for upload

should note that iv also tried disabling it from code behind

ajaxUploadImage.Enabled = false;

Have also tried setting disabled="true" inside the control, and checking the control in developer tools it is disabled, but I can still click on the text box or button and the pictures folder opens

score 3 · Answer 1 · answered Apr 28 '16 at 11:12

3

The control emits its own markup and is hard to manage.

You can try set Visible=false, because its logic runs every time the page is loaded and the control is visible.

answered Apr 28 '16 at 11:12

Mikhail Tymchuk

886
4
8

score 0 · Answer 2 · answered Apr 20 '20 at 18:09

I have been putting my head into the disabling part and it seems we can surely disable the AsyncFileUpload control.

The trick is, ajax toolkit re-assigns the ids to the its controls, so whatever your id is, it will re-assign a new id to it even if you are using <%= control.ClientID %> this approach to get the names of the control.

So, I would suggest you inspect the element in the browser and copy the element ID from there.

My Scenario:

This was my control in the markup:

<asp:AsyncFileUpload CssClass="custom-file-input" ID="fileupload" runat="server" OnUploadedFileError="fileupload_UploadedFileError" OnUploadedComplete="fileupload_UploadedComplete" />

Notice, My control's ID is fileupload. And this is how I was disabling it before:

$('#<%= fileupload.ClientID %>').attr('disabled', true);

Which obviously never worked because $('#<%= fileupload.ClientID %>') this returned me the ID as #fileupload which is not correct because originally, ajaxtoolkit had modified it from #fileupload to #fileupload_ctl02 so, I had to hard code the ID in my javascript to get it working. e.g:

$('#fileupload_ctl02').attr('disabled', true); // I am using an older version of jQuery,

For newer versions of jQuery, you would disable it using the prop() method instead.

JS

document.getElementById('fileupload_ctl02').disabled = true;

Hope it helps someone.

Why cant I disable ajaxToolkit:AsyncFileUpload

2 Answers2