Angular File Upload with Progress Bar with Resumable Functionality
Upload files of your project which can be uploaded from the same position if error occurs or page refreshes. File resumes from same position where it got interrupted.
Sometimes file-upload components can be quite hard to create.
You need to write code in JavaScript. Also, you need to create server and test multiple times, before you can deploy it to your application.
In this tutorial, we will learn how to do both.
You can find link to full code at the end of this article.
Prerequisite
Basic Knowledge of Angular and Node required.
Setting Up Environment
First, we will create a simple node.js express server.
Then we will create an Angular application and build a beautiful User Interface using Angular Material UI component library.
Final result will look like:
Let’s Dive into code!!!
Creating Express Server
We will be creating a simple node.js server using express that allow file to be uploaded.
Setting Up New Project
Create a new directory and initialize new project using following command. It will ask some info, you can fill in the details or simply press Enter.
npm initCreate file in your directory with name — — — — “app.js”
Installing External Dependencies
We need to install 3 external dependencies i.e express, body-parser, CORS
Express, is a web application framework for Node.js, designed for building web applications and APIs. Install express using following command.
npm install express --saveCross-origin resource sharing is a mechanism that will help us to access API from an Angular application. Install CORS using following command.
npm install cors --savebody-parser extract the entire bodyportion of an incoming request stream and exposes it on req.body . Install body-parser using following command.
npm install body-parserSetting Up Basic Express Server, Enabling CORS and adding fs that allow us to interact with file system. The app.js file will look like:
Understanding the Functionality
The user will select a file and as soon as he clicks on the upload button in front-end a request will be sent to server asking whether file exists in the back-end directory or not. Then we can have different scenarios:
Case 1-File exist with same size: If existing file size is same as uploading file size. It will show a popup message “File already exists”
Case 2-File exist with different size: If existing file is of different size compare to uploading file size. It will start uploading file from the same position to which it is uploaded. (For eg: If File size is 1000mb and 500mb file is already uploaded then it will start from 501mb).
Case 3-File does not exist: The file will simply start uploading from start.
Getting File Status
As soon as we get a request from front-end it will check for 3 parameters for the file i.e. fileID, name and fileSize which will be useful for retrieving the file information.
We will check whether file exists or not using fs.statSync in the backend folder “assets”. Here i have used a “assets” folder but you can use any folder of you choice. But make sure the folder name and name in code should match.
Then it will send a response about file details back to front-end.
Uploading File to Server
We will create a uploads object which will retrieve file in several chunks and store file in form of an object.
We will then store file data and initialize 4 different variables and get there values by making use of headers i.e.
- startByte: To the actual file size already uploaded, if 0 then start uploading from start.
- fileSize: To know the size of the file.
- name: To know file name.
- fileId: To give a unique id to each of the file.
Then we will write different conditions depending on the file status of uploaded data.
Complete app.js file:
Creating new Angular Resumable File Upload Project
We have now created an API, now we can start creating the user interface of project(front-end).
For that, we will create a new angular project. We will make use of angular-cli for this project. Open Command Prompt(cmd) and navigate to the desired loaction. Enter the following command in cmd.
ng new resumable-file-uploadExternal Dependencies
Include Angular Material UI component Library in your Angular Project for beautiful User Interface. It will ask for some user input, but you can simply press Enter.
ng add @angular/materialapp.module.ts File
Import various module namely
- HttpClientModule: Useful for making http request to server and getting response.
- FormsModule and ReactiveFormsModule: Useful for handling form data.
- Material Module: Angular Material UI component library module useful creating beautiful User Inteface.
app.component.html File
Here we will write our html code using different Angular Material modules and initialize input with type of file. Also add a mat spinner which shows a beautiful animation as file start uploading.
app.component.scss File
Adding basic styling to the project
app.component.ts File
Now we will connect our a front-end application with backend services over the HTTP protocol. We will be importing different modules from http such as:
HttpClient is useful for making Http requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).
HttpHeaders represents the header configuration options for an HTTP request. Instances are immutable.
HttpRequest represents an outgoing request, including URL, method, headers, body, and other request configuration options.
HttpEventType is a type enumeration for the different kinds of HttpEvents such as upload, download, response etc.
Now we will initialize variables useful to get the upload file details by the user such as selectedFile, name, uploadPercent.
Next we will create a function named onFileSelect() which will trigger an event as soon as file is selected by user and sends back the file name to the DOM.
Function resumableUpload() will be responsible for connecting front-end to backend in getting resposnses. First it will check whether file exist in backend or not by checking its name and file ID and store data in variable named fileId.
headers variable will store the header configuration of the file by making use of HttpHeaders.
If the file is already present in backend then it will show an alert popup stating “File already exists.” It will store the bytes of uploaded in uploadedBytes variable.
If the file is not present in backend then it will start uploading file from start or from to the bytes it is already uploaded in backend and shows a beautiful animation using mat-spinner.
Output:
That’s it! We’re done!
References
Your feedback is welcome!
If you enjoyed this article, please clap for it or share it. Your help is always appreciated.
