Warn the user a file is too big before the upload

Question

Hello SO,

To increase user experience, I would like to warn the user that the file is too big (let's say > 8M) before sending the whole file (which may take some time due to the size and the client connection). All kind of fields can be "pre-validated" client-side for a better user experience, but I'm stuck on the file size problem.

Is there a solution to this problem?

[edit] I'm also open to APC for PHP, which features the rfc 1867. I'm not sure if it's possible to cancel the form upload if we detect the size is too big. I certainly will award bounty if someone show me how to do it.

Answer 1

Here is a simple solution to that

http://www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

change it to match your needs

but beware it has been reported that it doesn't work in some browsers, it might need some changes.

Answer 2

You can use the File API in new browsers that aren't IE. I found this tutorial with some Googling: http://www.html5rocks.com/tutorials/file/dndfiles/

Also, the MDC reference is here: https://developer.mozilla.org/en/DOM/File

Unfortunately I don't think there is a way in all versions of IE. Flakron's answer covers 6 and 7 it sounds like, but I'm not sure about 8 and I'm not familiar with the IE API. You probably would need to go with a plugin based uploder (Flash, Silverlight, or Java).

Answer 3

Is there a solution to this problem?

I think you'll end up regretting choosing a "too big" size to warn about, because transfer speed is the real determination of throughput.

It's better to simply show the estimated time to completion along with a cancel option. A progress thermometer is nice too. That way, the user can decide if it will take too long, regardless of file size or connection speed, and you'll never have to go back and modify your chosen "too big" limit when past big uploads turn into future minor tasks due to the inevitable performance increases.

Answer 4

How about this Flash based uploader? http://swfupload.org/

This seems compelling

• Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
• Control filesize before upload starts

Since it's open source if you were keen you could combine the graceful degradation with the other HTML5 and IE only solutions to cover most browser installs: http://code.google.com/p/swfupload/