• Read more about Asynchronous File Uploading in Firefox, Chrome and Safari

Six years after Ajax was widely popularized with the introduction of Gmail, we are still stuck with synchronous file uploading. Certain techniques have done their best to fill this niche by using Flash apps, hidden iframes and the like, but all have felt like hacks at best.

Enter jquery-binaryUpload, a jQuery plugin I wrote to allow asynchronous file uploading in Firefox 3.5+, Chrome 5+ and Safari 4+. It works in Firefox 3.5 through the use of the File object, while in Firefox 4+ and the other browsers it takes advantage of the FormData object. The plugin papers over these different implementations with a clean simple interface.

The included sample code demonstrates typical usage with a Sinatra or Rails app though the plugin itself is completely framework agnostic. Callbacks are descriptive while additional options are outlined in the documentation. Please report any problems you run into or suggestions you have. Enjoy!

The IE Question
So far as I have been able to glean from my research, asynchronous uploading in Internet Explorer, short of an ActiveX control or one of the aforementioned techniques, is not currently feasible. IE does not natively support the FormData or File objects and the IE9 dev team makes no mention of it on their site. My efforts to contact their dev team have been to no avail.

• Read more about Faking 'onpaste' in Firefox

When trying to find a solution for cleaning Rich Text pasting into a textarea, we needed to find a way to detect pastes and trigger an event based on said action. Internet Explorer and Safari both have an onpaste event that allows you to hook javascript into a paste event, but Firefox does not allow this.

After a little Googling, I didn’t really come across much of a solution so I decided to roll my own.

  function checkForPaste(event) {     var e = event.element();     if ((e.previousValue && e.value.length > e.previousValue.length + 1) ||         (!e.previousValue && e.value.length > 1)) {        if (e.onpaste) {         e.onpaste(e)       } else if (e.readAttribute("onpaste")) {         eval(e.readAttribute("onpaste"));       }     }       e.previousValue = e.value;   }        function firefoxOnPaste() {     $$('textarea').each(function(e) {        if (e.onpaste || e.readAttribute("onpaste")) {         Event.observe(e,'input',checkForPaste);       }     });   }      if (Prototype.Browser.Gecko) {     document.observe('dom:loaded', firefoxOnPaste);   }

This snippet of code will automatically detect if an onpaste has been either added to a textarea’s attribute list (e.g. <textarea onpaste='alert("Pasted!")/>) or set programmatically. It will then automatically simulate paste detection using the oninput event and trigger the onpaste code when it believes a paste has been made.

The snippet will detect correctly for all pasting I’ve tried, including selecting a chunk and pasting a replacement. The only major caveat I’ve seen thus far is that the first input change after the page load will register as a paste if the textarea’s value has already been set. In any case, I thought it was a relatively straightforward way to solve the problem.