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();                
        }

score 2 · Accepted Answer · answered Dec 19 '11 at 08:18

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

score -1 · Answer 2 · edited Sep 30 '13 at 13:32

-1

Simple solution to the above problem is to add CSS for example this will work in all browsers.

<style type="text/css">
    .FileUploadClass input
    {
        width:100%!important; // mandatory
    }
</style>

<ajaxToolkit:AsyncFileUpload ID="asyncFileUpload" runat="server" CssClass="FileUploadClass" OnUploadedComplete="asyncFileUpload_UploadedComplete" UploaderStyle="Traditional"/>

edited Sep 30 '13 at 13:32

Shimon Rachlenko

5,469
40
51

answered Sep 30 '13 at 13:14

Salil Gupta

117
2
9

Can you explain a bit more as to how your code will solve the problem. – Guru Kara Oct 01 '13 at 13:54

Fire AsyncFileUpload control through a Button

2 Answers2