Show Progress Bar While Downloading & Uploading A File In Angular & Node JS

hey what's up guys this is anurag back with another video and in today's video i will show you how to show a progress bar while downloading or uploading a file using angular and node.js so without wasting any more time let's begin with the video [Music] first of all i will set up a basic download api in node.js in your case you can use your existing one and in node i am using a express framework and using that i will create a dummy route that is slash download then into that function first i will set a header access control expose headers to content disposition in the response.set header method as for the security reasons browser will not allow to read the content disposition header instead of a ajax request if you are front-end and back-end is on different origins and we'll need to read this content disposition header as filename is present on it so after that's done i will add a response.download method and this method requires a argument that is the file path that you want to download here i will give a dummy file path from my local directory then you can pass the optional callback function so once your download complete this callback function will get called and in the real scenario you might get this download path from your network storage so that completes our basic download api now we'll start coding in angular side here i'm using a angular material progress bar but feel free to use any other library or your custom one we'll start by adding angular material in my angular app by using ng add command and answering few of the questions to setup the angular material package [Music] once you do that import the mat progress bar model and any other required models like your button module after that open up your app component file for this demo i am showing in the app component but in real project you should create a separate component to handle the download in your app globally now i will create a due and style it using flexbox to align my due in absolute center then to show the progress bar you can pass number between 0-100 to the progress bar to give this number dynamically i will use a property binding syntax to pass the number from the value property then i will add a download button and add a click listener to start the download once your html part is done go to your component.ts file and here i will add a private property of underscore value and i will initiate its value to 0 then i will create a getter and setter for the underscore value property and in setter we'll add some conditions to check if the number is a number type by calling is nan function and will add another condition that the value should not be greater than 100 then i will create a service and there i will inject the angular http client then i will add a download method and here is your important step in the download method return http.get method and will pass some argument to that method first i will pass the api path from where my file should get downloaded then in the second argument i'll need to pass three options inside of object there i will add a response type as a blob second report progress to be true and observe to event once your subscription is set up then i'll go to the component.ts file and i will subscribe to that observable that we have created in the service instead of a download method by injecting the service in the constructor then if you click on the download button and then if you go to the subscription block and here if you add a debugger or a console multiple events are firing basically it will call the event multiple times until the file gets downloaded and here if you see in the type 2 event we are getting http header response and in the next subsequent calls we will get the loaded and the total size of the file [Music] so first we save the content disposition header in order to get our file name we'll need to extract the file name from the content disposition as it comes like this we'll achieve this by splitting the header by the file name then it will return an array so we'll destructure that array and we'll use the first index to get the file name after that we'll need to remove the duplicate codes from the string by calling string dot replace method and passing the double quotes to replace by empty string after that we'll add one more if condition to check the object has total and the loaded properties and if it is present then we simply get the percentage of the download file by dividing and multiplying the loaded and the total size here your total is your total file size in bytes and the loaded is the number of bytes is downloaded after that's condition added we'll add one more condition to check event has a body if it is then we'll need to call the save as method to pass the event dot body and file name to save the file into our system and to get the save as method you'll need to add the file saver module go ahead and install the npm module then import the save as from the file saver once you are done with it then we can test our download code by hitting on the download button and voila your download progress bar is ready and here is one tip if you are seeing some kind of charter in the animation of the progress bar because of the file size and basically this happens because you are setting the value in very short time so we can throttle this event to set a value in specified interval here i am setting at 250 milliseconds throttle time and if you want to learn more on throttling then you can let me know in the comment section below so now that's done you can start our upload part for that i will open up our node server and there i will install a package called multa to save our files to our dix once you install the package i will import that package and then i will go to the multus npm page i will copy a dick storage function into our application here i will change the destination path to where i want to save my files in my case i will store my files in the files folder in my root directory in your case you might save the files in some network storage solutions after that you can change your file name by appending some unique id so that you can do in this file name method for now i'll save my file as original name after that i will create a post api to handle my uploads here i will create slash uploads then as a second argument to this function i will pass a middleware so i will add upload.single as first i will show you the single file uploads then i will give a form key name where i will pass the file next in the callback function you can access the file information in request.file you will get the file path and the file name for now i'll simply send this detail to the client but as i said in the real scenario you may need to save this path to your db to access this file next time so now that's done now i will start coding in angular i will comment the download part in my html file here i will create a upload tube where i will add a input as type of file then i will add a change event and in that change event i will access the event.target.files to get the selected files as the array and in the upload method i will save this file to a global array to access these files later on then i will go to our app service and here i will add one more method called upload with the file as a parameter then i will create a new form data there i will append the file after that i will return the http.host method in that i will pass the url form data and the options next i will go to my component.ts file and i will add a on upload method in that on upload method i will call our service upload method and pass the file as an argument and then i will subscribe to that method once you subscribe to that method you can get those event and again here you will need to get the percentage by dividing the total and the loaded values and then i will show my message that i'm sending from my backend after successful upload now that's done we can test our upload function so i will go to my ui and i will select a file by by clicking on the browse button and hit upload as you can see i am able to upload a file and you can verify this by going to our node.js folder here you will see the uploaded file now i will show how to upload multiple files at one time for that we need to make few changes to our code i'll start this by going to our html file and here in the input i will add a multiple tag with the help of this user can select multiple file at one go after that i will go to my app.component.ts file in the change method here i will save the entire files array to the files property to get all files as a array then in the post method i will accept files as a array then i will add a for loop to append multiple files by adding append method in the for loop and i will add one more argument to give the file name now we will go to our node app and there will change the uploaded single method to upload.array method and there you can pass one more optional argument for max files that you can accept once that done you can get all files as a files array in request.files here i will simply send the files array to the client now we can test our multiple uploads and as you can see i can upload multiple files successfully and here is the proof that all files have been uploaded to my files folder [Music] and that's it for this video this was a video related to how to show the progress bar to your uploads and download in the angular i hope you liked this video if you did then make sure you like this video and subscribe to my youtube channel for more video like this that's it for now this is overall and i will see you later guys

Channel: Full Stack Dev

Views: 12,131

Keywords:

Id: RjViQoGDp10

Length: 13min 0sec (780 seconds)

Published: Mon Feb 22 2021