ASP.Net fileupload- Determine filesize with JS

ikoonman

I am trying to determine upload file size with JS before the actual file is uploaded. On ASP.Net's side, I register the onclick event for the submit button with RegisterStartupScript in Page_Load. The JS looks like this:

                js = @"<script language=""javascript"">";
                js += "function fileSelected() {\n";
                js += string.Format("var file = document.getElementById('{0}').files[0];\n", mappedId);
                js += "if (file) {\n";
                js += "    var fileSize = file.size;\n";
                js += string.Format("    var limit = {0};\n", fileSizeLimit);
                js += "     var doSubmit=true;\n";
                js += "    if (fileSize>limit) {\n";
                js += "         alert('File size exceeds upload limit');\n";
                js += "         doSubmit=false;\n";
                js += "         }\n";
                js += "    }\n";
                js += "    return doSubmit;\n";
                js += "}\n";
                js += "</script>\n";

The JS event is fired when the form is submitted (BEFORE the upload mechanism in the browser jumps into action). This code works fine in FF/Chrome. Naturally, in IE the JS fails, more specifically on the line "var file = ....".

Has anyone ever come across this? If the file size is bigger than default 4MB (or even the size I specified in the web.conf file) the browser displays with an error like "Connection reset ...". I've tried to handle errors with Globals.asax/custom error pages but that just gets ignored completely.

I just want to find a graceful way of warning the user when the file is too big.

I have tried the following:
[LIST=2]
[*]Check the filesize via Javascript. I cannot see the DOM for the fileupload control, so I cannot see if I am using the correct property for file size.
[*]Tried to handle the error page via custom error redirect, to warn the user of the invalid filesize
[/LIST]

Does anyone have a solution or perhaps a way I can approach this problem differently? I could try to use one of the myriad of Flash uploaders floating around on the web but I'd prefer first to try and find a solution to this problem.

Eitherway, I think the world might be better without IE

TIA

Sean^DCT4

Use AJAX/JQuery..

Alternatively you could use a 3rd party control i.e. DevExpress / Infragistics. Although their control suites are hugely expensive but help out time and time again with things like this.

Here's is something I googled and found when I searched "jquery fileupload filesize"

http://pixeline.be/experiments/jqUploader/

also,
www.jquery.com

Giblet

Depending on the IE version, you won't be able to support reading filesizes. It's a HTML5 feature.

IIS is horrible for it's limits, especially that connection reset issue.

I hate to suggest this, but something like SWFUpload could be useful, as it allows you to use Javascript events too.

Adding jquery might be overkill, most of the JQuery stuff can be avoided using the following example to async upload the file if you want to keep using HTML5, JQuery isn't the answer to everything.

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.open('POST', '/upload/uri', true);
xhr.send(file); // Simple!

function onprogressHandler(evt) {
    var percent = event.loaded/event.total*100;
    console.log('Upload progress: ' + percent + '%');
}