Added Bulk Upload functionality.

src/app/organization/organization.component.html

@@ -14,7 +14,8 @@ <h4> Download </h4>
     <div class="container-fluid">
       <div class="row action-wrapper">
         <div class="col-2"></div>
-        <button class="col-lg-3"> IMPORT </button>
+        <button class="col-lg-3" (click)="uploader.click()"> IMPORT </button>
+        <input hidden type="file" #uploader (change)="uploadCSV($event)"/>
         <div class="col-2"></div>
         <button type="button" routerLink="/issue/single" class="col-lg-3 blue-btn"> GENERATE </button>
         <div class="col-2"></div>

src/app/organization/organization.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { OrganizationService } from '../services/organization.service';
 import { Certificate } from '../services/certificate.model';
+import { HttpEvent, HttpResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-organization',
@@ -10,11 +11,9 @@ import { Certificate } from '../services/certificate.model';
 export class OrganizationComponent implements OnInit {
 
   private gridApi;
-
   constructor(private orgService: OrganizationService) { }
 
   title = 'app';
-
   columnDefs = [
       {headerName: 'Student Name', field: 'name', checkboxSelection: true},
       {headerName: 'Date', field: 'date' },
@@ -23,14 +22,26 @@ export class OrganizationComponent implements OnInit {
 
   rowData = [];
 
+  uploadCSV(event) {
+	    const csv = event.target.files[0];
+	    if (csv.size > 5_242_880) {
+	      alert(`CSV is larger than 5MBs.`);
+	    } else {
+      this.orgService.generateBulkCertificate(event.target.files[0]).subscribe(event => {
+      if (event instanceof HttpResponse) {
+        console.log('Uploaded!');
+      }
+    },
+    error => {console.log("Error: "+error.message);});
+  }
+}
+
   ngOnInit() {
     this.orgService.getCertificates().subscribe((certificates: Certificate[]) => {
-
-      // add certificates in ag-grid
       for (const certificate of certificates){
         this.rowData.push({ name: certificate.student.name, date: certificate.date, desc: certificate.issued_for });
       }
-      this.gridApi.setRowData(this.rowData);
+    this.gridApi.setRowData(this.rowData);
     });
   }
 

src/app/services/organization.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { Certificate } from './certificate.model';
 import { Environment } from '../environments/environments';
 import { Observable } from 'rxjs';
@@ -23,7 +23,14 @@ export class OrganizationService {
     // Would be used when organization wants to generate single certificate
   }
 
-  private generateBulkCertificate() {
-    // Would be used when organization wants to many certificates by using csv/excel file
+  generateBulkCertificate(csv) {
+    let data = new FormData();
+    data.set('file', csv);
+    let token = 'JWT '+localStorage.getItem('token');
+    const options = {
+      headers: new HttpHeaders().set('Authorization', token)
+    };
+    const req = new HttpRequest('POST', Environment.baseUrl+'api/issue_certificate/csv/', data, options);
+    return this.http.request(req);
   }
 }