File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP

in this tutorial we'll 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 we'll 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 and 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 one megabyte at least that way we can see some progress loading into the bar and it doesn't load so super fast so I browsed my computer and I chose Tom and Jerry mp4 which is a video file that was sitting on my desktop and it's approximately 2.8 megabytes now I'll 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 this 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 bytes 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 bytes when the upload is complete we have the application render out a message that comes back to the Ajax request so this file is actually being uploaded using Ajax and this message right here is an echo from PHP alright 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 dot HTML you can name this file whatever you want this is the file that just houses the form so first let's go into the body element and we'll put all of 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 and make sure I go down a couple of lines and close that form element now inside of the opening tag for that form element we're going to put an ID for that form and the ID 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 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 a type of file and this is what gives you user the little browse for file button so what allows them to browse their computer and select a file and we'll give this a name attribute that's equal to something simple like file 1 we're also given an ID attribute of the same value I will close that input element and we'll just put a break 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 we'll also give it a value attribute that way we can specify what the text is on the button we'll just make it say upload file now the last thing we need on this button is in 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 we'll write will be upload file then open and close parentheses so this is how we can execute the upload file function on click of this button so this first input allows the user to browse their 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 the way you want it I'm just making it very basic for demonstration purposes now we're going to add the new html5 progress element put in the opening tag and the closing tag for that progress element now we'll give this an ID of progress bar we'll make the starting value zero and we'll 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 so 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 has loaded with a little percent symbol and then there was the line that showed us how many bytes were loaded in and how many total bytes are 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 developer 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 has loaded but some people like showing them the number with the little percent symbol as well so that's all of the tml that our application will require for now now we can work on the JavaScript portion now first I'm going to pop in a function that's simply going to allow me to not use document 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 and 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 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 get element by ID many many times in your application now the next thing we need in our Java Script is this upload file function so let's copy that name of that function that's going to fire off on 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 parentheses put an opening curly brace go down a couple of lines and put in a closing curly brace now 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 and we'll make that variable equal to document get element by ID and the ID we want to target is file 1 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 a 0 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 that I have in place is going to be meant it 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 name 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 now the next variable we'll 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 we'll append a key value pair so the name or the key will be file 1 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 our Ajax request when we use the send method so now let's build that Ajax request we're going to say Bar Ajax equal to new XML HTTP request open close parenthesis semicolon 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 listener is 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 it's back that's when this load event fire is 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 bytes are uploaded to the server the progress event is going to be called to run or 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 will have functions in place ready to take care of that event these are all straightforward 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 happen 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 dot upload reference that we put there 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 gets 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 I'll name mine file upload parser 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 dot send method and this is what actually execute the whole Ajax request so we're going to send form data so what 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 now 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 bytes we're going to be able to access the event that loaded and event dot 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 okay let's get this first function progress handler written into place so let's put function progress Handler open closed 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'll work either way like that we're just 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 and 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 bytes 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 we'll target its inner HTML property we're going to make that equal to the string of uploaded bytes of total bytes so you'll see how many loaded bytes have progressed and how many total bytes you have we're also going to use event that loaded and event that total to get the percentage right now so let's type in var percent is equal to event dot loaded divided by event dot total and 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 we're multiplying it by a hundred to make sure there's no decimal we're moving the decimal over two places basically now we can say document dot get element by ID of this progress bar the new html5 progress bar and make its dot value equal to the percent and if that number ever happens to be a decimal and you want to math that round you can just put math dot round method to run on the percent number now we'll say document 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 will say dot innerhtml is equal to and we'll just take the same number here the percent plus the string of the percent symbol and the words uploaded dot dot 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 and press control V let's change the name of that to complete handler so we have function complete handler now 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 - the upload is complete now this complete handler function is the function that fires off when PHP echoes back the upload is complete - the Ajax request so when PHP echoes back the upload is complete - the Ajax request or if PHP echoes back some kind of ever event this complete handler will also pick that up so before we make the progress bar value back to zero we want to put something in the status stat innerhtml and that is the actual text coming back that is echoed back from the PHP file and that is target dot response text and if any of you are familiar working with Ajax you'll know that the target dot 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 handler function so the complete 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 one 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 cancel listener for if the file upload is canceled we'll name that function abort 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 okay 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 its temp location in the PHP temp folder its type its size and see if what the error message is 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 1 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 arrow 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 temp folder ready to be moved if it's not there then 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 executes correctly then we're going to echo back to the Ajax request file name 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 the 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 and 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 upload and in that folder we're placing the file now like I said you'd want to put more error handling here maybe to check 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 a 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 within a div so you'll see that many times people traditionally use to make progress bars and gauges using a div within 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 width is affected through JavaScript in this progress handler event so within this progress handler event you can simply target a divs width and make it grow according to the percent number so the inner div would be like a growing colorful bar that grows inside of a parent div and the parent div you just give it a border a background make it look any way you want and inside it'll have a child div 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 okay 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

Channel: Adam Khoury

Views: 193,536

Keywords: Ajax Tutorial, ajax file upload tutorial, html5 tutorial, javascript tutorial, php tutorial, file upload bar tutorial, video upload script, file progress meter, file upload script, mp3 upload script, progress bar tutorial, learn programming, HTML5, PHP, Ajax, web development, learn, online, free, lesson, teacher, student, education, school, video, class, classroom, adam khoury

Id: EraNFJiY0Eg

Length: 24min 39sec (1479 seconds)

Published: Thu Sep 19 2013