Handle's only file uploads, UI is left to the designer. Accepts inputs/native files(with restrictions)
JavaScript PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Pure Javascript Upload

No flash, no page reload, all javascript (with some frame hacks). This upload function is a cross browser implementation that uses native file upload when possible, while falling back to frame hacks in older browsers.

The Problem

For native upload to work, the browser has to have implemented the FileReader API and support the sendAsBinary method of an XHR Request Object.

Currently, only Firefox 3.6+ has successfully implemented the above. The latest Webkit(Chrome/Safari) support file upload, but only a single file at a time as outlined by Andrea Giammarchi. The rest of the browsers have no support for file upload over an XHR Request.

The Solution

There are 3 different ways to send files without refreshing the page, native upload using the FileReader API, single file upload using the upload XHR Request, and submitting a form through an iframe. This script handles all 3, but with limitations. A normalize method was extended onto the Upload constructor at an attempt to keep things consistent. What this does is force all browsers that don't have the FileReader API implemented to use the frame hack.

You can enable file upload by calling the Upload.denormalize method, but this will cause inconsistency in the way file uploads are handled. Mainly in that you can no longer send multiple files, and can only send data as GET parameters, instead of POST. Still, with it enabled, File drag and drop from desktop will be supported.

Bowser Support

IE 6, 7, 8
FireFox, 3.0.17, 3.5.7, 3.6
Safari 3.0.4, 3.1.2, 3.2.1, 4.0.5, 5.0
Opera 9.52, 9.64, 10.01, 10.10
Chrome 5.0


Andrew Valums - Original Author

Andrea Giammarchi - Chrome/Safari Hack

Corey Hart - Creator of this adaptation