PWA approach to uploading files

Ionic Framework ionic-v3
7

Here is a brief description of what is working for me. Feel free to improve:
( I have skipped the authorization requirements )

In my Component:

import { FileSelectDirective, FileDropDirective, FileUploader } from '../../../node_modules/ng2-file-upload';
const URL = 'https://locationofyourserverandapiendpoint';

export class Page1 {
uploader:FileUploader;
  hasBaseDropZoneOver:boolean;
  hasAnotherDropZoneOver:boolean;

  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }

_//NOTE: because I am using authorization I am passing the token through the file uploader - otherwise not required_

constructor(platform: Platform, public navCtrl: NavController, auth: AuthService) {
this.uploader = new FileUploader({authToken:'Bearer '+stored_token ,url: URL+"/VARTOBEPASSEDWITHFILE"});
}

Here is the template html: (as it pertains to the state of the image in previous post - needs work):

<ion-grid>
        <ion-row>
            <ion-col width-40 [ngStyle]="{'background-color': 'Bisque'}">
                <h3>Select files</h3>
                <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone">
                    Drop Files Here
                </div>
                <br/> Multiple
                <input type="file" [ngStyle]="{'background-color': 'Bisque'}" ng2FileSelect [uploader]="uploader" multiple /><br/>
            </ion-col>
            <ion-col width-60>
                <h3>Upload queue</h3>
                <p>Queue length: {{ uploader?.queue?.length }}</p>
                <table class="table">
                    <tbody>
                        <tr *ngFor="let item of uploader.queue">
                            <td><strong>{{ item?.file?.name }}</strong></td>
                            <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                            <td *ngIf="uploader.isHTML5">
                                <progress id="progressbar" max="100" value="{{ item.progress }}"> </progress>
                                <div id="progressbarlabel">{{ item.progress }} %</div>
                            </td>
                            <td class="text-center">
                                <span *ngIf="item.isCancel"><ion-icon name="close-circle"></ion-icon></span>
                                <span *ngIf="item.isError"><ion-icon name="trash"></ion-icon></span>
                            </td>
                            <td nowrap>
                                <button ion-button icon-right *ngIf="!item.isSuccess" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">Upload<ion-icon name="cloud-upload"></ion-icon></button>
                                <button ion-button icon-right *ngIf="!item.isSuccess" (click)="item.remove()" [ngStyle]="{'background-color': '#D2691E'}">Cancel<ion-icon name="close-circle"></ion-icon></button>
                                <button ion-button icon-right *ngIf="!item.isSuccess" color="danger">Remove<ion-icon name="trash"></ion-icon></button>
                                <button ion-button icon-right *ngIf="item.isSuccess" [ngStyle]="{'background-color': 'Green'}">Image Uploaded!<ion-icon name="checkmark-circle-outline"></ion-icon></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    <div>
                        Queue progress:
                        <progress id="progressbar" [ngStyle]="{'background-color': 'Green'}" max="100" value="{{ uploader.progress }}"> </progress>
                        <div id="progressbarlabel">{{ uploader.progress }} %</div>
                    </div>
                    <button ion-button icon-right (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">Upload all<ion-icon name="cloud-upload"></ion-icon></button>
                    <button ion-button icon-right (click)="uploader.cancelAll()" [ngStyle]="{'background-color': '#D2691E'}" [disabled]="!uploader.isUploading">Cancel all<ion-icon name="close-circle"></ion-icon></button>
                    <button ion-button icon-right color="danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">Remove all<ion-icon name="trash"></ion-icon></button>
                    <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"></button>
                    <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                </button>
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>

And finally the SCSS:

.my-drop-zone {
        border: dotted 3px blue;
        height: 100px;
        width: 100%;
    }
    .nv-file-over {
        border: dotted 3px red;
    }
    /* Default class applied to drop zones on over */
    .another-file-over-class {
        border: dotted 3px green;
    }
    html,
    body {
        height: 100%;
    }