Fire AsyncFileUpload control through a Button

Question

I want to fire the AsnyncFileUpload control through another control in the page.

I have used AsyncfileUpload from ASP.NET AJAX toolkit and hidden it through JQuery. And places a button next to it. When even i click this button and select a file i want to fire the AsycnFileUpload and upload files.

I have written most of the code but i get an Javascript error when i select a file.

---

(ERROR: Access Denied;

PLACE: setTimeout(function () { mainForm.submit(); //Error here; uploader._waitTimer = setTimeout(function () { uploader._wait() }, 100); }, 0);

---

<asp:Button ID="btnFileUpload" runat="server" Text="Add" onclientclick="FileUploadClick(); return false;"/>
<ajaxToolkit:AsyncFileUpload  runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"/>

And this is my Javascript (I saw the markup generated by the control and got the File input type by appending "_ct102")

function FileUploadClick() {
            var fileUploadControl = document.getElementById('<%= AsyncFileUpload1.ClientID %>' + '_ctl02')
            fileUploadControl.click();
            //fileUploadControl.setActive();                
        }

Answer 1

I researched this more and found that this cannot be done. Firing the file type input from other control is disabled due to security reason. So this cant be done.

Only workaround to style fileupload control is to place the control with opacity 0 and placing our control below this file control and changing the Z-index in HTML. Infact this is the exact trick used be the AsyncFileUpload control.

Here is the link explaing the trick http://www.quirksmode.org/dom/inputfile.html

So i applied this trick on the AsyncFileUpload which internally is applying it on HTML file upload control

Thanks All