Creating an AJAX File Upload Progress Bar in JavaScript - Tutorial For Beginners

hey guys he going my name is dumb and in this video we're going to be looking at creating an AJAX progress bar with file uploads so basically we're going to be creating this right here so you have a HTML form and it's going to be submitted through Ajax and when I choose a file for example just this thumbnail right here I can open it then press upload and we get this this nice animated progress bar so we're gonna be creating this in this video okay so let's go over to this blank HTML file right here and get started okay so you will need some sort of server-side language to actually of course receive the uploaded file so I'm using PHP I'll just show you my upload script so inside my text editor I've got this index.html file and of course also the upload dot PHP file so I'm going to be sending the file to this upload PHP file and this is a very basic example of how to actually and receive a file with PHP and then of course move it to a separate directory so basically once a file gets submitted to this upload script it's going to just choose a upload path so it's gonna basically upload it to a directory called uploads which is right here and yeah just move it to that so that is the basic PHP upload script I assume you're gonna have your own sort of script but this is just for demonstration ok cool so back inside the HTML we can begin by actually just creating the HTML structure as well as this CSS okay so below the h1 tag let's just begin by creating an HTML form so we can say form and this would be submitted through Ajax so we don't actually need to provide things like action and the egg type so I can just get rid of the action and I can instead give it a class of form and give it an ID of upload form so this class have form here just to plus some of my own basic CSS styles to the form just for visual effects it is not required to include this class here okay so inside the form we can then create the input type of file and give it a name and ID of InP file so of course this name IMPD file is going to match what's inside PHP iymp file right there alright cool so back inside here I'm just going to add a line break and create the submit button for input submit and give it a value of upload okay I'll also give it a class of button once again just for some visual styling okay cool so now I can save this and refresh the page and we get for this right here alright if you want to see my video on creating your own custom file upload button I'll leave it in the comment section okay so now to create the progress bar let's go back inside here and create a div below the form this will have a class of progress bar and an ID of progress all right we can also give it a few so basically this will be the container for the progress bar and the feel is going to be what actually fills up the progress bar if that makes sense so we can give this div a class of progress bar fill and inside here create a new span and this will be the actual percentage all right so I'll just quickly show you the previous example I'll just save this and go back inside the working demo we have here the progress bar text and then this is going to be the film so the actual blue bar and of course the container is right there okay so back inside here let's apply some CSS to make this look a bit nicer so up in the CSS let's target the progress bar plus let's give it a height of 35 a width of 250 okay so of course style this to your own needs and give it a border of 2px solid and a dark blue okay now for the actual progress bar film and say progress bar he'll give it a height of 100 percent so it's gonna take up the entire horizontal so the entire vertical space of its container let's for now give a width of 25 percent so you can see what's actually happening okay and give it a background of light blue and a display of Flex the reason for this is to basically vertically align the text of the percentage so you can say I line items to be Center for that and I font weight of bolds which will cascade down to the actual text and also a transition of week so basically to create the animation of the progress bar filling up we're going to change the width property and we're going to make this transition okay and finally for the progress bar texts the progress bar text you give it a margin left of 10px and you know what I should probably move this font weight just down to the text just you know to make it a bit more solid and more meaningful okay so now I can save this and refresh the browser and we get this result right here so we can see here that obviously we have the progress bar text and also we have the field so the field is currently at 25% so if I was to go inside here and change the field to be for example 80% we can see that the transition or such animation has occurred so this will be how we're going to display the progress to the end user okay so we're going to use JavaScript to basically edit the progress text and also the width of the progress bar field all right so let's just reset and set the width of this to be 0% when the page loads up so I can now save this refresh and of course we get this result right here of course so now on to the JavaScript now this code is going to be pretty straightforward it's not too difficult to understand so let's go inside the JavaScript and begin by getting a reference to all of the useful HTML elements so let's make a new constant for each one of these we can call the first one upload form equals through document dot get element by ID I'm going to pass inside here upload form all right you do the same thing for the InP file so they can just copy and paste so I am P file inside here and for the progress bar move it we want the progress bar fill and also the progress bar text to actually modify him so let's get those two elements right here so we can say progress bar film is equal to document query selector so we're going to look out for the progress bar ID so this will be the parent of the fill and then we're gonna get the first occurrence of a progress bar feel alright so now basically we are selecting the first class with the progress bar fill which will be of course this one right here and a similar thing for the for the text but we're gonna use the progress bar film as the Jewish selector element so now we can just pass inside here we're going to select the first progress bar text which is inside the progress bar field which is of course this one right here and of course just change this to progress by text so and that is our four elements which have been selected within JavaScript we can now use them so basically we are going to override the event listener in a way for the HTML form so basically when it gets submitted we're gonna do some JavaScript so down here we're going to target the upload form I'm gonna say add event listener so when the form gets submitted we are going to run a function let's call this function upload file okay so now let's create this function alright so down here you function call this one upload file and this is this is going to take in the event object for this submit because inside here we're gonna say either prevent default now this means we're gonna prevent the default behavior which may be the browser trying to submit the form so we're going to say okay we don't want the web browser to submit the form we're gonna handle it ourselves using javascript okay so down here we can now use an ajax so first let's create a new instance of an XML HTTP request so we can say const xhr equal to a new xml HTTP request down here we can now open the request so we can say xhr open and we're gonna be creating here a post request so similar to setting the values on the input form itself so we're going to say post and then we're going to post to the upload script upload dot PHP ok so now this is the part where we're actually going to do some progress stuff so down here no basically just gonna say xhr uploads dot add event listener so this upload property and contains a bunch of useful things relative to checking the progress of an upload so we're going to add an event listener to to this property and basically it's gonna be the progress event so we're gonna say here add event listener and then put progress inside there so this progress event fires off every so often during the upload process and at each one of those occurrences we can check the message and then of course use it with the progress bar alright so inside here we're going to accept the event object so this is very important to actually making this work so for now I'm simply going to consult log B II event objects that we can see what we're actually working with okay and now down here we're going to set the request header for the request to be multi-part such form data so we can say xhr got set request header and we can just say content type to be multi-part multi-part such form data so once again basically recreating some of the attributes you would pass into the actual form inside JavaScript okay and now we can finally say xhr dot since we're going to make the request and we're going to submit the file so to do this we're gonna use the form data object so we're gonna say send and then inside here we're gonna say new form data and pass in here upload form so basically this form data object is going to use the upload form itself which will be this right here and basically submit the file automatically for us okay so now I can save this and refresh the browser and we can see what's actually happening all right so refresh now you may want to go inside your developer console or developer tools and go to the network tab it might be similar in Firefox and just go to the network section and add some manual throttling so here I can say I want to use this on a slow or a fast 3G connection that way the file does not upload instantly and you can actually see some progress so now this will be a bit slower I'd like to see the percentage go up all right cool so now I'm gonna choose a file here I'm gonna choose these same thumbnail from before and open this and now check the console because the event here the progress event is going too far off every so often while it's being uploaded okay so we should see a bunch of console logs in the console so I can just go inside here and press upload and we get here all of the progress events come through in the console and finally it actually stops down here Samba had about I think 15 or 20 progress events which had popped up during the upload so now for each one of these we're going to update the progress bar as we go along so we can see here we have access to a loaded property and also we have access to a total property so these two things right here we're going to divide and then find the percentage all right so let's go back inside the event listener function okay and we're going to do this right here we're gonna first calculate the percentage so right now we've only got access to the loaded and the total property we don't have an actual percentage so let's make that using these two properties so we're gonna say inside here Const percent is equal to now but we have to check if the length of the sorry check if the if the length property is actually computable so the sorry if the if the response contains a good content length so so basically what happens is when you submit the submit the request we have here a response header which contains the length of the of the file and basically sometimes using javascript the length is not computable so you can't actually calculate the percentage using this method so want to make sure that the length is actually computable before we try to calculate the percentage so back inside here we can do this using the length computable property okay so back inside the code let's say % is equal to now if I can compute the length then we're going to compute it so we're going to say e dot loaded divided by e home and then multiply that by 100 so basically we are dividing the loaded by the total and then multiplying that by 1 only if we actually can using the length of the response okay and if there is not the case so if we cannot you know if the if the length is not computable then we're going to say a default value of zero all right cool so let's go down here now and basically use this percentage inside on the progress bar fill and the progress bar texts so we can say progress bar filled dot style dot week is equal to percent dot two fixes at two decimal places so when this value gets calculated you're going to get about ten decimal places so I'm just saying here let's make it two only and then add what end the percent sign to the end of that string okay and to the same thing or very similar thing through the progress bar texts okay so progress bar text dot text content is equal to once again and the same thing so we're changing the text content of the progress bar text and also the CSS style of whip for the progress bar film so I can now save this and refresh the browser and choose this file once again choose the thumb JPEG open up press upload and we get the animated or the nice-looking progress bar okay now of course if I was to try and upload a bigger file such as this entire mp4 file upload this and we can see it takes a little longer you know what it didn't actually work let's press the upload button and we can see now it takes obviously a lot longer to upload the whole movie file alright and that right there is how you can create an AJAX progress bar with file uploads in JavaScript thanks for watching and I will see you later

Channel: dcode

Views: 30,221

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, developer, lecture, recording, website, web, app, application, javascript, js, ecmascript, es6, es7, ajax, jquery, xhr, xmlhttprequest, http, https, request, post, get, form, php, nodejs, python, upload, script, uploading, file, image, progress, percent, event, response, html, html5, css, css3, load, loading, data, server, client, onreadystatechange, onload, responsetext, send, header

Id: H-091qVG6LM

Length: 17min 13sec (1033 seconds)

Published: Tue Feb 05 2019