File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP

Lesson Code: http://www.developphp.com/video/JavaS...
In this programming lesson you can learn to use HTML5 + JavaScript + PHP to render an elegant file upload progress bar in your file upload forms. It is desirable to render a file upload progress bar when users upload files to your server, much like the way YouTube renders a file upload progress bar every time we upload a video to their network. The programming is not hard even for beginners to understand and the script is relatively short. The new HTML5 progress element has been made specifically for developers to use in scenarios such as this, it automatically matches the specific browser software visually, but you can customize your loading bar graphics for branding or consistency in all the different browsers. Due to the fact that we are using a new HTML5 element, this application may not work as intended in old versions of browser software. Use a modern popular browser software when experimenting with this code.

---

Closed Caption:

in this tutorial will be showing you how
to use html5 javascript and PHP to
render elegant file upload progress bars
now due to the fact that we're using
html5 this application may not work as
intended in old versions of browser
software
so for now just make sure you experiment
in either google chrome firefox or
internet explorer the most modern
versions of those and will be coding
every line of the small script so
there'll be no need for any bulky third
party code libraries or frameworks
this way you'll have a better
understanding of how the application
works at its core it would be much much
easier for you to manage and customize
it down the road
first let's take a look at the finished
product of the lesson
so you can evaluate whether or not your
applications might benefit from having
file upload progress meters this little
demo is running live on my server right
now online
so what I'll do right now is browse my
computer for a video file and make sure
it's one that's over 1 megabyte at least
that way we can see some progress
loading into the bar and it doesn't load
so super fast so I browse my computer
and I chose tom and jerry . mp4 which is
a video file that was sitting on my
desktop and it's approximately two point
eight megabytes
now press upload file and what I did was
I added at the bottom just for developer
purposes two lines here
this first line shows you the exact
number
the percentage of how much of the file
has uploaded to the server so far and
this bar is nice green bar here shows
the exact percentage as well
now down at the very bottom I put in an
extra line that shows how much of the
file bites have loaded in and the total
bytes of the file size
so as the developer you can see how much
of the file has loaded in exactly how
many bytes and the total amount of bites
when the upload is complete we have the
application render out a message that
comes back to the ajax request
this file is actually being uploaded
using ajax and this message right here
is an echo from PHP
all right let's begin with the bare
bones of an html5 web document this way
we can all see the production of this
application from scratch mine is named
html5 file upload form HTML you can name
this file whatever you want
this is the file did just houses the
form so first let's go into the body
element will put all the HTML that we
need in place and then we'll put the
JavaScript here in the script element up
top
so the first thing in the body is i'll
add an h2 heading that says html5 file
upload progress bar tutorial then under
that i'm going to open up my form
element make sure I go down a couple of
lines and close that format
moment now inside of the opening tag for
that form element we're going to put an
ID for that form and the idea we give it
isn't very important at this point and
actually within the whole application
we're not even going to reference that
ID but your form might need a name and
an ID attribute so you can go ahead and
give it that then for the data encoding
we're going to have a multi-part form
data so the encoding type will be
multi-part form data because we're
building a file upload application and
then the method that the form will use
is post
we're also going to specify the method
post within our ajax request because
really Ajax is going to be what's
uploading the file and post will be
specified for that Ajax request
ok now inside of the form we're going to
have an input element with the type of
file and this is what gives you user
little browse for a file button
so what allows them the browser computer
and select the file and will give this a
name attribute that's equal to something
simple like file one will also give it
an ID attribute of the same value will
close that input element and we'll just
put a brake tag there
that way we have a line break on the
page now the next input element we want
is going to be type of button will also
give it a value attribute that way we
can specify what the text is on the
button will just make it say
upload file now the last thing we need
on this button is an on-click event
listener so we'll put in on click is
equal to whatever javascript function
that we want to fire off so the name of
the javascript function that will write
will be upload file then open and closed
parenthesis so this is how we can
execute the upload file function on
click of this button this first input
allows the users to browse your computer
and select the file and then this input
is simply a button that initiates the
upload of that file and I'm programming
this all very basic you guys would have
to customize your whole application to
get it working exactly where you want it
I'm just making a very basic for
demonstration purposes
now we're going to
add the new html5 progress element put
in the opening tag and a closing tag for
that progress element now we'll give
this an ID of progress bar will make the
starting value zero and will make the
max attribute 100 that way it has a
range from 0 to 100 and i'm just going
to put a style attribute in there to
make it a width of whatever I want
you can customize the width of that
progress bar
I'll put it 300 pixels you can also
target some other style properties for
that progress element
now the next thing we're going to do is
have those two lines that i had under
the bar in the demo of the application
there was a little line that showed us
the exact number of how much progress is
loaded with a little percent symbol and
then there was the line that showed us
how many bites were loaded in and how
many total bytes who were for the file
size
so let's pop those into place and the
first one is an h3 heading and that has
an ID of status then we have a paragraph
element with an ID of loaded and total
so status is where we're going to put
the actual percentage number for how
much is loaded in
but like I said this is for development
purposes but if you want to have it in
your final application for your end
users to see you can choose to do that
but you can just remove these if you
don't want them because really all you
need is the progress bar to show them
how much is loaded but some people like
showing them the number with a little
percent symbol as well so that's all of
the HTML that our application will
require for now
now we can work on the JavaScript
portion first I'm going to pop in a
function that's simply going to allow me
to not use document dot get element by
ID a whole lot of times in my
application since I don't want to use
that over and over and over again
I can just write a small function that
returns that and all i'll have to use is
an underscore to get any element by its
ID on the page
if you've ever used jquery before
they'll use a dollar sign here
that way in your applications all you
have to do is put dollar sign and then
refer to the element that you want i'm
just going to use an underscore that way
nobody gets confused
so all this function does is set up to
return the document dot get element by
ID
object reference for whatever element
that you're targeting on the page
it's simply a way to avoid writing
document dot get element by ID many many
times in your application
now the next thing we need no javascript
is this upload file function so let's
copy that name of that function that's
going to fire off the on click event of
this upload file button so we go up into
the JavaScript and we type in function
upload file open close parenthesis put
an opening curly brace go down a couple
of lines and put in a closing curly
brace and the first thing we have to do
in that upload file function is target
the file that is to be uploaded
so we're going to need a variable name
and we'll just name it
file will make that variable equal to
document that get element by ID and the
idea we want to target is file one right
here and we're going to access its files
array and the first element in the files
array we can access that by putting the
zero in between square brackets so
you've targeted that file field by its
ID and then you access its files array
the first element in the files array
that basically gives you the object
reference for whatever file the person
has browsed for and then you can upload
it
now this next line and i have in place
is going to be commented out but you
might want to uncomment the first few
times that you run this application so
you can see how you have access to the
file name the file size and the file
type
even before the user presses the upload
button so in your JavaScript side of
your application before this file is
sent to PHP for upload
you have access to the files named size
and type if you need to evaluate those
things for your form but I'll just leave
that commented out
you guys might want to uncomment it and
let it run first couple of times that
you run your application and that's just
there for developer purposes as well and
the next variable will need is a form
data variable so we'll just name it
aptly form data and that's going to be
equal to new form data object instance
and we're establishing that so we can
easily send key value pairs of data in
the ajax request to the parsing file so
we'll take that object reference now on
the next line and we're going to dot
append run the append method and will
append a key value pair
so the name or the key will be file one
and the value will be the next parameter
so we put a comma and then we just refer
to the file object reference here and
this form data instance is going to be
sent through ajax request when we use
the send method
so now let's build that Ajax request
we're going to a bar ajax equal to Nu
XML HTTP request
open closed parenthesis semi-colon now
since the whole point of this
application is to have a file upload
progress bar
we're going to have to have some event
listeners added to this
ajax instance because we want to listen
for the progress event we want to listen
for the complete event when it's done
we're also going to listen for the error
event and the abort event
so let's pop those lines into place
right now you can see we're taking the
Ajax object instance and we're adding
event listeners to it and this first
event listeners progress
the second one is load and that's your
complete event
so when the whole transaction is
complete and the file is finished being
uploaded and PHP gives a response back
that's when this load event fires often
complete handler function will execute
during the progress event for this
upload a progress handler function is
going to be called every time that
there's new progress of upload to the
server
so every time more bites are uploaded to
the server the progress event is going
to be called to run
the progress handler function is going
to be called to run by the progress
event listener
now these last two ever and abort are
rarely ever going to happen and if they
do happen
we'll have functions in place ready to
take care of that event these are all
straight forward how we're adding the
event listeners to the Ajax instance we
simply target the event that we want to
listen for then we put in the name of
the function that we want to fire off
when that event occurs so we have to
have these functions written in our
script
we're going to do that in just a second
we're going to have four functions
progress handler complete handler error
handler and abort handler
we're going to write those four
functions then when these events
happened to take place
those functions are going to take care
of those events
now you'll notice that the first one the
progress event has the upload object
reference before we add the event
listener and that's just so that we can
monitor the progress of the upload
while it's uploading if you remove that
. upload reference that we put their
you'll notice that your application
might not function correctly so we put
that in place just to make sure that we
can evaluate the progress of the upload
while it's uploading all right so now
the very next thing we need for the ajax
request is to run the open method now
the open method
it's two parameters the first parameter
is going to be the method which is post
and then the next parameter is simply
the URL of your parsing file so on a
mine
file upload parser dot PHP that's going
to be the file that actually moves the
uploaded file to the server and i'll
show you that file in just a moment and
the very last line we need within this
upload file function is Ajax . send
method and this is what actually execute
the whole ajax request so we're going to
send form data
so all we have to do is put in our form
data object instance and it already has
the file appended to it right here so
that way the file can be uploaded by PHP
now before we look at that PHP upload
parse file
we're going to need these four little
functions in place that i was talking
about
and the progress handler is the most
important one for this exercise because
that's the one that's going to keep
firing off every time the server is
updated with new loaded bites
we're going to be able to access the
event . loaded and event that total so
you'll have how many bytes have loaded
so far and the total bytes and we can
compute those two numbers to give
ourselves a percentage
ok let's get this first function
progress handler written into place so
let's put function progress handler open
close parenthesis opening curly brace
closing curly brace
now when these events are firing off we
want to snatch up the event reference in
the arguments area of this function so
for the argument for this function we're
just going to put event
now sometimes you might see this written
as EVT or sometimes you might just see
it as e and it doesn't matter anyway you
want to write it
it can be and it could be this if you
want it doesn't even matter
but as long as you're referencing that
event and i'm just going to write out
event because that's what it is but keep
in mind that you might see this written
as EVT and remember an actionscript we
used to write just e to reference events
remember so whether you see it as e
whether you see it as EVT or whether you
see it fully written as event it will
work either way like that which is
scooping up the event reference as an
argument to this function that way we
can access the event within the function
now first thing we'll do within that
function is say document dot get element
by ID and we're going to target this
loaded and total element down at the
bottom
this one this line is just going to be
in for developer purposes just to show
you how much of the file has loaded in
so far and how much total bytes so
you'll get the loaded bites and total
bytes shown to you in this paragraph
element but you can remove that if you
need to for your finished application
so once we target that paragraph element
will target its inner HTML property
we're going to make that equal to the
string of uploaded bites of total bytes
so you see how many loaded bites have
progressed and how many total bytes you
have
we're also going to use event that
loaded an event that total to get the
percentage right now so let's type in
bar percent is equal to event . loaded /
event . total we're going to multiply
that by a hundred that way we don't get
a decimal value and we get a correct
percentage number that we're looking for
it's just basically were multiplying it
by a hundred to make sure is no decimal
we're moving the decimal over to place
is basically now we can say document
that get element by ID of this progress
bar
the new html5 progress bar and make its
. value equal to the percent and if that
number ever happens to be a decimal and
you want a math . round
you can just put math . round method to
run on the percent number i will say
document that get element by ID the
status element on the page which was
this little h3 element here we're going
to put the actual percent number and the
percent symbol so the user can see it
was a . innerhtml is equal to and we'll
just take the same number here
the % + the string of the percent symbol
and the words
uploaded . that please wait and that's
all of the code that we're going to need
within our progress handler function so
this function is going to fire off a lot
and that's what gives you the animated
effect of the bar growing so let's take
that whole function
press ctrl-c go down under that one
press ctrl v
let's change the name of that to
complete handler so we have function
complete handler now we can remove this
line from the bottom and the only line
we want to keep in there is the progress
bar value we want to make that zero
after the upload is complete now this
complete handler function is the
function that fires off when PHP echoes
back the upload is complete to the ajax
request
so when PHP echoes back the upload is
complete to the Ajax requests or if PHP
echoes back some kind of ever event this
complete handler will also pick that up
before we make the progress bar value
back to zero we want to put something in
the status that inner HTML and that is
the actual text coming back
that is echoed back from the PHP file
and that is target . response text and
if any of you are familiar working with
ajax you'll know that the target .
response text property is how we get the
response text back from a parsing file
like a PHP script and that's all there
is to the complete and the function so
the complete the handler is tied to the
load event and the load event just
pretty much means when the operation the
transaction is fully completed now the
ever and abort functions are going to be
very basic
let's get the error handler here for
that 1 i'm just going to write into the
status element upload failed and we can
take that function and then get the
abort handler and that'll be like a a
cancel listener for if the file upload
is cancelled your name that function
aboard handler and in the status will
put upload aborted
now we have all four of our event
listener functions in place and that's
it for the JavaScript now all we need to
do is write our file upload parser dot
PHP which is simply going to be a script
that uploads it moves the uploaded file
to the server and then it will echo back
to this ajax request some kind of
message
ok so you can see file upload parser is
made very basic for this demonstration
and you would want to expand it with
more error handling and checking of the
file size the type and to make sure it's
there and things like that the only ever
handling i put in place was to check and
see if the file was browsed for it just
to see if it's there before we run the
move uploaded file function on it to
actually put it where we want it on the
server
so the first thing we do in this script
is we want some variables that represent
the files name
it's temp location in the PHP temp
folder its type
its eyes and see if what the error
messages for that file upload we get
access to all of those little things by
specifying the global files variable the
key or the name of the incoming key
value pairs and we were sending in as
key value pair the key of file one and
then the file data to be uploaded and we
can tap into the little specific details
about this file by specifying its array
elements because the file that's coming
into this script has an array of data
behind it that we can access little
parts of for instance the error the size
the type temp name and name
so the first thing I'll do is check to
see if the file is in the PHP temple
they're ready to be moved if it's not
there and we're going to echo back to
Ajax request ever
please browse for a file before clicking
the upload button and we exit the script
if the file is in the PHP temp folder
and it's ready to be moved we just run
the move uploaded file function so all I
did was I put if move uploaded file
function execute correctly then we're
going to echo back to the ajax request
filename upload is complete because at
that point everything is successful else
if the move uploaded file function does
not execute correctly then we're going
to echo back to the ajax request move
uploaded file function failed and you
guys know how to move uploaded file
function works it takes two parameters
the first parameter is the file to be
uploaded where it's residing in the PHP
temp folder temporarily before it gets
moved in the second parameter
is your destination the path and the
name that you want to have for that file
you can name the file whatever you want
if you feel like changing the name or
you can just keep the original name that
it was uploaded as which is what we're
doing here or you can change it and you
can also target any folder in your
directory on your website in your folder
system
I'm just targeting a folder called test
uploads and in that folder replacing the
file
like I said you want to put more error
handling here maybe it's checked the
file size its type and things like that
the script is made 'basic just for
demonstration purposes
so that's it for file upload parser and
it's very simple
now back in our upload form i want to
stress to you guys that you don't have
to use the progress
the new html5 progress bar element you
can animate any graphics any custom
graphics that you want
for instance if you want to have a
canvas element here instead
and you want to use any crazy lines or
circles or whatever to show progress of
the file upload you can do that you can
have animation on a canvas element
instead of having this progress element
here
you can also put a div with in a div so
you'll see that many times people
traditionally used to make progress bars
and gauges using a div with in a div
they just make the parent div have a
border and a background then they put an
inner div inside of it and that inner
divs with is effected through javascript
in this progress handler event so within
this progress handler event you can
simply target a divs with and make it
grow
according to the percent number so the
inner div would be like a growing
colorful bar that grows inside of the
parent div and the parent give you just
give it a border and background make it
look any way you want
and inside it will have a child give
that grows dynamically according to the
percent of the file upload so there's
many many different ways you can be
creative with this and I just wanted to
use the progress the new html5 progress
element because that's exactly what it
was designed for
it's a new modern thing we have to use
in the web and it was made for exactly
this purpose or things similar to this
but keep in mind that you don't have to
use that you can use any custom graphics
that you want
ok so that shows you how to use html5
javascript and PHP to render elegant
file upload progress meters and all the
programming that you need to be able to
customize this thing for your future
applications
I hope you've enjoyed this lesson and if
you get a moment click the like button
if you liked it and if you have any
questions or comments related to this
material you can type that in under the
video bye bye