tags:

views:

322

answers:

2

How can I check the size of an image a user is uploading? Client side first with server side double check would be the best solution.

+2  A: 

What you describe is the ultimate battle to get more information of the HttpFileUpload in HTML 2.0 specs, as that the is HTML spec you are referencing for a Form POST. Unfortunately, HttpFileUpload does not allow you to get this - not even in Javascript. It's a very common problem.

Two solutions:

  • The normal solution is to change your web.config and modify the http runtime (how long to allow an upload, like 30 minutes for a big file) and the http filesize to increase the limit (default is 4 MB). This applies to Ruby/php, ASP.NET, and ASP.NET MVC - it applies to all languages as it is the HTML 2.0 spec that limits the HttpFileUpload data you can obtain on a form POST. This will allow the user to upload the entire file; and then, you would process the restrictions on your side in server code. Not the best solution; but, it is the only solution unless you use a 3rd part.

  • Use a 3rd party "file monitor" plugin.

One of the easiest I've seen is RadControls by Telerik. What these controls do us they install an HttpModule, HttpHandler, and special javascript. There are several 3rd parties out there that does does, but basically this is how it works:

  • Javascript captures the HttpFileUpload submission, and re-routes the form POST to a special handler (/RadControlsUploadHandler.asmx for example).
  • The RadControlsUploadHandler updates a static variable of the actual bytes uploaded in realtime.
  • Then the Javascript loads a "Progress Bar" popup that constant hits the RadControlsUploadHandler.asmx for a "Status" update. This status update executes the HttpModule that reads the static variable data that is in process of the original Form post to the same handler.
  • Then, the module returns JSON data back through the "Progress Bar" ajax call, giving the status of the amount of bytes upload, the bandwidth estimated etc.

Here's a demo of Telerik's Progress Bar upload:

http://demos.telerik.com/aspnet-ajax/upload/examples/customprogress/defaultcs.aspx

Personally, I don't like not knowing how they are locking the thread for these uploads - as I have scalability concerns when using these 3rd party tools under high use. But, for Joe Bloe's blog, they are great tools for.

Problem w/ASP.NET MVC

The problem with these 3rd party tools is that they only work under ASP.NET WebForms - the standard ASP.NET. ASP.NET MVC removes the entire ASP.NET WebForms concept - therefore, rendering these controls useless.

Humm, perhaps there's a new project for someone to write. :)

eduncan911
well, thank you for the verbose response. How about width and height, same boat?
blu
Zero properties can be read during Form submission - you have to wait until the file is completely uploaded before you can access ANY parameters on it. It sucks, I know.
eduncan911
The value of the FileUpload control is READ-ONLY to JS - you can there fore monitor it for changes, read the value, load the image into a div on your page (for "local preview"), and read things like the width and height from there.
Zhaph - Ben Duguid
Just noticed that FF no longer returns the full path as the value of a "file" input type :( IE7 still does though. http://bit.ly/nLLCf
Zhaph - Ben Duguid
Yay for browser specific implementations: in FF, calling .files[0].getDataURL() on the FileUpload control will return the file data in a form you can use as an image src.
Zhaph - Ben Duguid
A: 

Finding the size on the client without an applet or ActiveX control that allows the user to access the file system won't be possible. For security reasons, the browser restricts access to the file system. On the server side, the uploaded file should have a content length associated with it that you can check.

tvanfosson