ASP.net FileUploader Control - click using jQuery

Question

I'm using a FileUpload control in ASP.net. Formatting input buttons is such a pain that I'm trying to work around by using a simple (formatted) button to activate a jQuery function that clicks the FileUpload control. Here is my formatted button, called btn_upload_FILE:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" />

Here's the FileUpload control:

<asp:FileUpload runat="server" ID="FILE_uploader"></asp:FileUpload>

And here's the jQuery:

$('#<%= btn_upload_FILE.ClientID %>').click(function () {
     $('#<%= FILE_uploader.ClientID %>').click();
});

Super-simple, and it works great, it opens a file browser and lets me select a file.

The problem is that, even through the FileUpload control appears to be working, the file I select isn't actually loaded into the FileUpload control, so my code-behind can't see it. It looks like it's working, but the FileUpload ends up empty. The FileUpload's .change event is not fired, so I know nothing is happening. If I just press the FileUpload control's button, it works fine.

Can anyone tell me why the FileUpload isn't receiving a file, even though I can browse with it? Any help is, as always, appreciated.

afzalulh · Accepted Answer · 2013-09-11T02:45:19.973

To upload file using FileUpload, you need to do a full postback, so you have to use a button with it:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" />
<asp:FileUpload runat="server" ID="FILE_uploader"></asp:FileUpload>

And in the code behind, the button's Main method:

protected void Main(object sender, EventArgs e)
{
    // Specify the path on the server to
    // save the uploaded file to.
    String savePath = @"c:\temp\uploads\";

    // Before attempting to perform operations
    // on the file, verify that the FileUpload 
    // control contains a file.
    if (FILE_uploader.HasFile)
    {
        // Get the name of the file to upload.
        String fileName = FILE_uploader.FileName;

        // Append the name of the file to upload to the path.
        savePath += fileName;


        // Call the SaveAs method to save the 
        // uploaded file to the specified path.
        // This example does not perform all
        // the necessary error checking.               
        // If a file with the same name
        // already exists in the specified path,  
        // the uploaded file overwrites it.
        FileUpload1.SaveAs(savePath);

        // Notify the user of the name of the file
        // was saved under.
        UploadStatusLabel.Text = "Your file was saved as " + fileName;
    }
    else
    {
        // Notify the user that a file was not uploaded.
        UploadStatusLabel.Text = "You did not specify a file to upload.";
    }

}

You will find more here in MSDN.

Hope it helps!

EDIT:

You can also use jquery. First, hide the asp:button by setting it's display Property to none:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" Style="display:none" />

Now add the jquery to trigger this button's click event when there is a file in FileUpload:

 <script type="text/javascript">
       $(document).ready(function () {
               $(document).on('change', '#<%= FILE_uploader.ClientID %>', function () {
               if (document.getElementById('<%= FILE_uploader.ClientID %>').files.length === 0) {
                   return;
               }
               $('#<%= btn_upload_FILE.ClientID %>').trigger('click');
           });
       });
   </script>

And don't forget to add a reference to jquery at the head of your page.

Got it - thanks. The page wasn't posting back. I don't think my approach will work, unfortunately. My jQuery is activating the FileUpload control, but I don't see how I can initiate a postback after my user has selected a file. Darn. You cleared up my question, though, much appreciated. — Stanton, Sep 11 '13 at 02:01
You can use __doPostBack with jquery. Here's a post that might help:[How to use __doPostBack()](http://stackoverflow.com/q/3591634/690329). — afzalulh, Sep 11 '13 at 02:05
Thank you @afzalulh, but the problem is WHEN to do the postback. I need to wait until my user has selected a file using the file browser, but there doesn't seem to be any way to detect that. The .change event would be the ideal choice, but it doesn't change until after the postback. — Stanton, Sep 11 '13 at 02:09
I have added jquery to trigger the button's click event. Please check the edit. — afzalulh, Sep 11 '13 at 02:46
I'm at home now, but I'll try this first thing tomorrow. I didn't think the .change event would help, but definitely worth a try. I'll comment one way or the other. Looks promising, thanks! — Stanton, Sep 11 '13 at 03:03
Hey @afzalulh, after a little tinkering and three cups of coffee, I integrated your solution into my project and it works perfectly. Thanks once again for all your help! — Stanton, Sep 11 '13 at 15:34

score 0 · Answer 2 · answered Sep 11 '13 at 00:42

0

Is your Form's Enctype set to "multipart/form-data"?

protected void Page_Load(object sender, EventArgs e)
{
    this.Page.Form.Enctype = "multipart/form-data";
}

answered Sep 11 '13 at 00:42

Stan Smith

896
7
19

ASP.net FileUploader Control - click using jQuery

2 Answers2

Linked