asp.net FileUpload event after choice is made and before submit for upload

Question

I would like to display the size of the file that was chosen via the Browse button of the FileUpload control.

Ideally, this value is displayed immediately after the user chooses the file but BEFORE the "Upload File" Button is clicked.

I have and on a webform. The Button looks like this:

<asp:Button ID="UploadButton" runat="server" onclick="UploadButton_Click" Text="Upload File"/>         

The onclick event for the button control results in a postback and the file is uploaded.

I know how to get the size of the file but not before the Upload File button is clicked and a postback occurs.

Is there an event associated with the FileUpload web control that could submit the form (i.e. postback) without the clicking of the button?

The whole intent is that I want to give the user a feel for how long the upload might take...set a different expection for a 10mb file than for a 2kb file, etc.).

Answer 1

The problem is that there's no way to find out the size of file on the client side without posting back. You could use Ajax, but that would mean uploading the file first anyway.

This can only be done using an ActiveX control of some kind. I would recommend using something like the Silverlight FileUploader because it gets the size of the file before posting back and even has a nice progress indicator.

UPDATE: If you want to trigger a postback or Ajax Request after the user clicks browse, the client side event is "onchange". Here's an example of how to use the onchange event.

<asp:FileUpload runat="server" 
    onchange="alert('you selected the file: '+ this.value)" />

You could have the onchange, trigger an ajax to upload the file first and then update a label showing the size of the file. The problem with this is that if it is a large file, it defeats the purpose of letting the user know before hand that it will take a long time.

Here's another recommendation: There's a jQuery plugin that uses flash to determine the size of the file before uploading and it's very easy to use. Check it out at jQuery Uploadify