Add file upload component

Created reusuable file upload component to be used on updated firmware page.
Component can:
-Upload file
-Display status icon
-Clear upload field

Made minor style change to file upload on certificate management.

Tested in GUI.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I09bf56eee4d670681ea5e95c1807f8177c0e4c08

2 files changed, 87 insertions, 39 deletions

diff --git a/app/common/components/file-upload.js b/app/common/components/file-upload.js
new file mode 100644
index 0000000..7fccabd
--- /dev/null
+++ b/app/common/components/file-upload.js
@@ -0,0 +1,60 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  const template = `<div class="file-upload">
+                      <label
+                        for="uploadFile"
+                        class="file-upload-btn btn btn-secondary"
+                        ng-if="!$ctrl.file"
+                        tabindex="0">
+                        Choose file
+                      </label>
+                      <input
+                        id="uploadFile"
+                        type="file"
+                        file=$ctrl.file
+                        class="file-upload-input"
+                        accept="{{$ctrl.fileType}}"/>
+                      <div class="file-upload-container"
+                        ng-class="{
+                        'file-upload-error' : $ctrl.fileStatus ==='error'}"
+                        ng-if="$ctrl.file">
+                        <span class="file-filename">
+                          {{ $ctrl.file.name }}</span>
+                        <status-icon
+                          class="file-upload-status"
+                          status="{{$ctrl.fileStatus}}">
+                        </status-icon>
+                        <button
+                          type="reset"
+                          class="btn file-upload-reset"
+                          ng-if="$ctrl.file.name || file"
+                          ng-click="$ctrl.file = '';"
+                          aria-label="remove selected file">
+                          <icon file="icon-close.svg" aria-hidden="true"></icon>
+                        </button>
+                      </div>
+                      <div class="file-upload-btn">
+                        <button
+                          type="submit"
+                          class="btn btn-primary"
+                          ng-click="$ctrl.onUpload(); $ctrl.file = '';"
+                          ng-if="$ctrl.file"
+                          aria-label="upload selected file">
+                          Upload
+                        </button>
+                      </div>
+                    </div>`
+
+  const controller = function() {
+    this.onUpload = () => {
+      this.uploadFile({file: this.file});
+    };
+  };
+
+  angular.module('app.common.components').component('fileUpload', {
+    template,
+    controller,
+    bindings: {uploadFile: '&', fileType: '@', fileStatus: '@'}
+  })
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/styles/elements/file-upload.scss b/app/common/styles/elements/file-upload.scss
index 4704d6d..ad459f7 100644
--- a/app/common/styles/elements/file-upload.scss
+++ b/app/common/styles/elements/file-upload.scss
@@ -1,29 +1,3 @@
-/**
-  * Used for file upload
-  * Markup
-      <div class="file-upload">
-        <label for="upload_cert_new" class="file-upload-btn btn btn-secondary" tabindex="0">Choose file</label>
-        <input
-          name="upload_cert_new"
-          id="upload_cert_new"
-          type="file"
-          file="newCertificate.file"
-          class="file-upload-input"/>
-        <div class="form__field file-upload-container">
-          <span ng-hide="newCertificate.file">No file selected</span>
-          <span>{{ newCertificate.file.name }}</span>
-          <button
-            type="reset"
-            class="btn file-upload-reset"
-            ng-if="newCertificate.file.name"
-            ng-click="newCertificate.file = '';"
-            aria-label="remove selected file">
-            <icon file="icon-close.svg" aria-hidden="true"></icon>
-          </button>
-        </div>
-      </div>
-*/
-
 // Choose/upload button
 .file-upload-input {
   width: 1px;
@@ -38,19 +12,33 @@
   outline: 0.2rem solid $base-02--04;
 }
 
-// File name of uploaded file field
-.file-upload-container {
-  background: $background-02;
-  padding: 0.5rem;
-  span {
-    padding-left: .5rem;
-  }
-  .file-upload-reset {
-    float: right;
-    margin-top: -.5rem;
-    icon {
-      margin-right: -1.7em;
-      margin-left: -1.5em;
+.file-filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 300px;
+  white-space: nowrap;
+  padding-right: 0.5rem;
+}
+
+.file-upload-error {
+  border-bottom: 2px solid $notification-error--dark;
+}
+
+.file-upload {
+  min-width: 240px;
+  max-width: 330px;
+  .file-upload-container {
+    align-items: center;
+    background: $background-02;
+    display: flex;
+    height: 2.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0.5rem;
+    .file-upload-reset {
+      padding: 0;
+      icon {
+        margin: 0;
+      }
     }
   }
 }