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.

Speed Up Your Magento Store by 300%

You can watch video on File Upload in Angular 6/7 with Progress Bar Using Web API


File Upload Progress Bar Web API HttpClient Service

Please leave comments

17 Comments

truecodex launched free android app. You can download and install truecodex app on your mobile and get notification of the latest post.

Video Tutorials on YouTube