AJAX file upload

By mike@mike-miles.com

Recently for a project I needed to build a custom photo gallery web application, which would allow the administrators and site users to both uploaded photos. The thing about file uploads is that to the user (which in my case was administrators and site visitors) is that it can be very boring to the user, and not very elegant. Since users were providing additional information to the photo, I was saving everything to a database including the filename of the photo uploaded (for each upload I would generate a random name). I wanted the user to be able to upload their photo, preview it, then finish completing the rest of the form. Normally to do this would require at least 3  steps;

1. Have the user upload their file, and submit the page.
2. Reload the page, save the file then display a second form for the user to provide details
3. save the details to the database.

Now this fine, a tried and true way to do it, but boring to the user because before they can finish filling out the form they would have to wait for the file upload to finish (which could take awhile depending on file size and connection). We dont want the user to have to sit there for a long time waiting for the upload to complete (idle users are BAD, for a number of reasons, example it  gives them time to say ‘screw it’ and navigate away from our site).  It would be much better if the user had something to do while their photo was uploading, keeping them busy and happy.

So what I wanted to do was have the user select a photo,  which would then (using AJAX) be sent to another page to upload, and return the file name.  While this was happening the user would see a loading icon, and be able to complete the rest of the form.  Once the upload page returned the filename, I would display the form’s submit button.

At first I was stuck on how to exactly accomplish this effect (I knew I wanted to use AJAX).  After doing some googling I came across this solution.

Basically a full blown AJAX file upload is not possible, but we can get the feel and effect using a hidden Iframe.

Sorry to say I’ve had to remove this code for legal reasons.
but feel free to checkout the source I used to create the code to draft your own solution.