added progress bar to file uploads

Author: codediodeio

src/app/items/item-form/item-form.component.html

@@ -13,18 +13,6 @@ <h3>New Task Form</h3>
       <span *ngIf='title.errors; then errors else valid'>template renders here...</span>
     </div>
 
-    <!-- <br>
-    <label class="control-label">Body</label>
-    <textarea  placeholder="Item Body" class="form-control" rows="5"
-    [(ngModel)]="item.body"
-    required minlength="5" maxlength="200"
-    #body='ngModel'>
-    </textarea>
-
-    <div *ngIf="body.dirty">
-      <span *ngIf='body.errors; then errors else valid'>template renders here...</span>
-    </div> -->
-
 
     <button class="btn btn-primary" (click)='createItem()' [disabled]="!title.valid">Create</button>
   </fieldset>

src/app/items/items-list/items-list.component.html

@@ -11,6 +11,3 @@ <h1>Items</h1>
 <hr>
 
 <item-form></item-form>
-
-
-<!-- These temples will appear contionally -->

src/app/uploads/shared/upload.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { AngularFire, AngularFireDatabase, FirebaseListObservable } from 'angularfire2';
-import * as firebase from 'firebase';
 import { Upload } from './upload';
-import * as _ from "lodash";
+import * as firebase from 'firebase';
+
 
 @Injectable()
 export class UploadService {
@@ -21,18 +21,6 @@ export class UploadService {
     return this.uploads
   }
 
-  singleUpload(file: File) {
-    let upload = new Upload(file);
-    this.pushUpload(upload)
-  }
-
-
-  multiUpload(files:FileList) {
-    let filesIndex = _.range(files.length)
-    _.each(filesIndex, (idx) => {
-      this.singleUpload(files[idx])}
-    )
-  }
 
   deleteUpload(upload: Upload) {
     this.deleteFileData(upload.$key)
@@ -43,7 +31,7 @@ export class UploadService {
   }
 
   // Executes the file uploading to firebase https://firebase.google.com/docs/storage/web/upload-files
-  private pushUpload(upload: Upload) {
+  pushUpload(upload: Upload) {
     let storageRef = firebase.storage().ref();
     this.uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);
 

src/app/uploads/upload-form/upload-form.component.html

@@ -1,3 +1,12 @@
+<div *ngIf="currentUpload">
+  <div class="progress">
+    <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': currentUpload?.progress + '%' }"></div>
+  </div>
+
+  Progress: {{currentUpload?.name}} | {{currentUpload?.progress}}% Complete
+</div>
+
+
 <div class="card card-outline-primary">
   <div class="card-block">
 
@@ -8,7 +17,7 @@
 
     <button class="btn btn-primary"
             [disabled]="!selectedFiles"
-            (click)="upload()">
+            (click)="uploadSingle()">
 
       Upload Single
     </button>

src/app/uploads/upload-form/upload-form.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { UploadService } from '../shared/upload.service';
 import { Upload } from '../shared/upload';
+import * as _ from "lodash";
 
 @Component({
   selector: 'upload-form',
@@ -10,6 +11,7 @@ import { Upload } from '../shared/upload';
 export class UploadFormComponent implements OnInit {
 
   selectedFiles: FileList;
+  currentUpload: Upload;
 
   constructor(private upSvc: UploadService) { }
 
@@ -20,16 +22,32 @@ export class UploadFormComponent implements OnInit {
       this.selectedFiles = event.target.files;
   }
 
-  upload() {
+  // upload() {
+  //   let file = this.selectedFiles.item(0)
+  //   this.upSvc.singleUpload(file)
+  // }
+
+  uploadSingle() {
     let file = this.selectedFiles.item(0)
-    this.upSvc.singleUpload(file)
+    this.currentUpload = new Upload(file);
+    this.upSvc.pushUpload(this.currentUpload)
   }
 
   uploadMulti() {
     let files = this.selectedFiles
-    this.upSvc.multiUpload(files);
+    let filesIndex = _.range(files.length)
+    _.each(filesIndex, (idx) => {
+      this.currentUpload = new Upload(files[idx]);
+      this.upSvc.pushUpload(this.currentUpload)}
+    )
   }
 
 
+  // uploadMulti() {
+  //   let files = this.selectedFiles
+  //   this.upSvc.multiUpload(files);
+  // }
+
+
 
 }