Checking A File's Upload Size In The Browser

This really just a quick note so I don't lose the code snippet I just used...

I'm working on a form which allows users to upload a file, but we want to stop them uploading giant things. Ultimately the server's maximum upload filesize will stop anything too huge getting through, but it's nice to remind people of the limit before they bother uploading.

This is a great little snippet to do that in current versions of Chrome, Firefox and Safari.

$('#contact_file').bind('change', function() { 
  filebytes = this.files[0].size;
  if(filebytes>1024*1024*5) {
    alert("The file you selected is TOO LARGE and will be rejected by the server. Please select a smaller file."); 
  }
});

If you can't work out what is happening there, then "contact_file" is the id from your file input and 1024*1024*5 is the limit you want to impose, in this case 5MB. Don't forget to check that the server side limit is in line with this.

It won't work in IE* or some older browser versions, but it's a nice extra courtesy for users where it can be executed. You could also hook it up to the submit button if you want to do a check at that stage.

*Apparently there's an ActiveX thing you can do for IE users, but I am not so inclined.

Firefox 3.6.6 redirect issue

Today I spent a chunk of time investigating an issue related to redirecting browser requests for media files to the CDN (content delivery network) for that domain. The redirect was being thrown into a redirection loop. The curious thing about the issue is that it only affected users using Firefox 3.6.6 on Microsoft Windows.

I tested the MP3 player in Opera, Chrome and even Internet Explorer and everything performed as expected, but when I used Firefox 3.6.6 it failed every time for any file. Then I checked it in Firefox 2.0 and Firefox 3.5.10 - both did not reproduce the issue. I checked it in Firefox 3.6.6 on an Apple Mac and the issue could not be reproduced. Neither could it be reproduced in Firefox 3.6.7(beta) on Windows.

Multiple Firefox Installations
I decided to grab Firefox 3.6.4 (the previous release - there was no 3.6.5) and install that to see if just this version was experiencing the issue. To do this I decided to set up another Firefox install - If you've not done this before, there's a great guide here: http://idizyn.com/development/installing-multiple-versions-of-firefox/ The post is pretty old, but what worked for Firefox 1.5 and 2.0 still works now.

Installing Firefox 3.6.4 confirmed my suspicion that this problem only occurred so predictably in Firefox 3.6.6.

What Caused This??
I recorded the headers for different browser versions using Live HTTP Headers. This highlighted that Firefox 3.6.6 was being thrown into redirection loop, but didn't explain why. I added timestamps to the redirection point and saw that the redirection was not reflecting any change in that, so some level of caching was involved - but this cached result did not occur for any other browser version (even on the same machine).

I disabled my Add-ons, flushed my cache, and restarted the browser multiple times to no avail - I could not isolate either a cause or a solution. At this point I can only suggest there is a problem with this release of Firefox causing the problem.

Firefox 3.6.7 is currently slated for release on 20 July 2010 (in 6 days). Hopefully this will address this issue and many users will quickly upgrade without us having to suggest it as a solution to this issue.

"X-Moz: prefetch" and skewed page-hits

Earlier today I installed a WordPress plugin recommend for tracking the popularity of posts. The plugin is unsurprisingly named "Recently Popular". After installing the plugin I ran some quick tests and found that I was getting extra hits recorded. I spent a bit of time back-tracking to find the source and after systematically disabling all other plugins and page elements found that it was firing in wp_head() in the page header.

After some more digging, I noticed that the extra hit was for the chronologically next published post and that the problem occurred in both WordPress and WordPressMU. This wasn't making a lot of sense so I decided to try a different browser - more of a sanity test than anything. That's when I found it didn't occur in Chrome, or Opera - just Firefox 3.5.6 that I'd upgraded to a few hours earlier.

I fired up the Live HTTP Headers add-on and checked out the requests Firefox was making. It was definitely making both post requests. I took a closer look at the second request and noticed the extra header "X-Moz: prefetch".

A quick search for X-Moz: prefetch turns up Mozilla's Link prefetching FAQ which gives a good description of what is happening and why. WordPress creates a tag similar to the following when wp_head() is executed:

<link rel='next' title='The Next Post' href='http://your_domain/year/month/day/the_next_post/' />

I am unaware of anyway to disable the prefetch hints. You could edit your header.php and remove the wp_head() statement, but many plugins rely on the execution of this function so results could be unexpected and undesirable. The issue for me was not that the hint was published but that the prefetch hits were being counted as real post requests, as well as the actual request when I clicked through a second or two later. This would seriously skew the perceived popularity of posts.

My solution was to ensure that the Recently Popular plugin ignored post requests that passed the "X-Moz: prefetch" header. Depending on your server configuration, the method of checking the header exists may differ - apache_request_headers() (alias getallheaders()) is only supported when PHP is installed as an Apache module. Most servers should support checking for $_SERVER['HTTP_X_MOZ'].

I wonder how many other people will wonder why their page hit stats have mysteriously increased without any increase in ad impressions, etc.

I will contact the plugin author to suggest an update once I've published this post.

Essential Add-on Tools for Firefox

Any good developer should have a few different browsers installed in order to check things are working properly in all of them. I currently have Firefox 2 and 3, Opera and IE6 installed and have IE7 on another box. I haven't gotten around to installing Chrome yet, but I guess I will have to sooner or later.

Firefox 3 is my browser of choice and here's why:

• Tabbed browsing
  
• Decent rendering engine
  
• Live Bookmarks (Feeds)
  
• Ctrl+U access to Page Source
  
• Useful Add-ons
  

I don't like how much memory Firefox hogs, but it's much better than it used to be and maybe I should curb my tab usage. Sometimes the Shockwave Flash plugin flakes out and won't play until I disable/enable it or restart the browser, but that could also be related to tab usage too.

The following Add-ons are the reason Firefox is the first browser I'll turn to. They are incredibly valuable additions to your development toolbox. You've probably already got many of them installed.

Firebug allows you to "edit, debug, and monitor CSS, HTML, and JavaScript live in any web page." I couldn't count the number of times I've right-clicked to Inspect Element. It has a tiny footprint in your status bar when you're not using it. This is the best web debugging tool I've used.
https://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer adds a toolbar and menu that allow you to manage cookies, CSS, Forms, Images, Outline elements along with a host of other tools. Highlights for me are the Cookie management, Outlining elements (to help debug layout issues) and the Error Console for debugging Javascript.
https://addons.mozilla.org/en-US/firefox/addon/60

NoScript is a security add-on that allows you to protect yourself against XSS and Clickjacking attacks by only allowing active content to run from sites that you trust. It's this flexible script blocking approach that also makes it a useful debugging tool. You probably should have it installed to see how borked your sites are - it has a huge user base.
https://addons.mozilla.org/en-US/firefox/addon/722

ScreenGrab lets you save webpages as images. You can grab the whole page or just the visible portion, or even copy it to the clipboard. No more copy+pasting sections together to screenshot a long page.
https://addons.mozilla.org/en-US/firefox/addon/1146

Adblock Plus allows you to browse without ads. It works very well and is incredibly popular because of that. Users love it, advertisers and websites dependant on ad revenue hate it. As long as flash banners keep soaking up CPU cycles, I'll keep using it.
https://addons.mozilla.org/en-US/firefox/addon/1865

YSlow for Firebug analyzes your web pages and tells you why they're slow (based on Yahoo's rules for high performance web sites). Some of the criteria is a bit subjective or inapproriate for smaller sites, but generally it offers some good tips.
https://addons.mozilla.org/en-US/firefox/addon/5369

SeoQuake SEO extension helps you "deal with search engine optimization(SEO) and internet promotion of web sites." It's possibly a little bloated for some users, but it does cover a lot of bases. It's worth checking out if you're doing any SEO work.
https://addons.mozilla.org/en-US/firefox/addon/3036