One of the greatest issues with web development at the moment is how images can be uploaded to a website. This generally requires a file upload field per image, and usually a complete page refresh in order to upload the file. Not only is this daunting for the user – who is probably on the slower side of the internet connection – but also for the developer and the server.
The server has to process this in real time, on page refresh and along with loading the rest of the page all while it copies the file from the user device to the server in the form of a temporary file and then move that same temporary file to the desired location and rename it in the process.
Let’s Get To The Code
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
This is all known to us and there should be nothing new going on here.
Now, line 68 shows us the file upload file, and looks like this:
<input type="button" onclick="uploadFile()" value="Upload" />
a) the progress count needs updating, on line 26, which is calling the uploadProgress function to update the progress count,
b) the upload is complete, on line 27,
c) the upload failed, on line 28,
d) the upload has been cancelled while in progress, on line 29
If, after all of that, the code is still executing, our little function is going to post the data to our predetermined URL, which we have set up as the PHP file ‘upload.php’, on line 30.
At this point, I’d like to run through the functions we have here quick and look at what they do, even though our code is very simple and would usually speak for itself.
On line 34, we have the function uploadProgress. What this function does is have a look at the file you are uploading and determine how much of it, in percentage, has been uploaded at any time. This is the real HTML5 Goodie right here. Before HTML5, doing this required Flash and a whole lot of magic.
On line 44 we have function uploadComplete(), which obviously just let’s us know that the upload is complete, and on line 49 function uploadFailed tells us if the upload has failed (you guessed that one, didn’t you?)
Line 53 defines the function uploadCancelled(), which, yes, you guessed it again, tells us if the upload was cancelled.
Now, you might think I am being magnanimous, but as you can see there really is nothing difficult about this code at all. Two years ago I tried to pull off this feat on a shared hosting server without using Flash, and let me tell you that it was not easy nor was it one page of code. Before HTML5, it was a nightmare.
Go ahead and write this code, and try it out, and you’ll see how simple it is. The HTML elements are simply doing what they need to do here, which is get the job done while we make jokes and look on from a distance.
So, there we have it – upload file, get a readout of how far along we are, and of course you could use CSS to make this into a bar, or anything you want to, really, and the file is uploaded via ajax and we can even see the filename, file size and file type before we upload.
Try it, you’ll love it.