File Upload in Angular 6/7 with Progress Bar Using Web API

Posted at: November 30, 2018 2:16 PM

Upload file with progress bar on the server using API, created in CodeIgniter.

app.module.ts

Import ReactiveFormsModule and HttpClientModule into app.module.ts

Create File Upload Service

Create file upload service for post data on server.

Import HttpClient, HttpEvent, HttpErrorResponse, HttpEventType into service src/app/file-upload.service.ts

Import throwError, catchError and map for http error response and map data.

Create Uploads Component

ng generate component uploads

Import FormBuilder and FormGroup into src/app/uploads/uploads.component.ts for create reactive forms.

Import FileUploadService into src/app/uploads/uploads.component.ts for post data to the server.

src/app/uploads/uploads.component.ts

src/app/uploads/uploads.component.html

Api Code in CodeIgniter

Create Api.php controller in CodeIgniter on server side.

This lesson also available on YouTube
File Upload Progress Bar Web API HttpClient Service

Please leave comments

23 Comments