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
diff --git a/app/access-control/controllers/certificate-modal-add-cert.html b/app/access-control/controllers/certificate-modal-add-cert.html
index 208bf1b..c4c3c2d 100644
--- a/app/access-control/controllers/certificate-modal-add-cert.html
+++ b/app/access-control/controllers/certificate-modal-add-cert.html
@@ -53,9 +53,9 @@
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>
+ <div class="file-upload-container">
+ <span class="file-filename" ng-hide="newCertificate.file">No file selected</span>
+ <span class="file-filename">{{ newCertificate.file.name }}</span>
<button
type="reset"
class="btn file-upload-reset"
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;
+ }
}
}
}
diff --git a/app/index.js b/app/index.js
index 3b3ab8ac..eb27a34 100644
--- a/app/index.js
+++ b/app/index.js
@@ -73,6 +73,7 @@
import table_checkbox from './common/components/table/table-checkbox.js';
import status_icon from './common/components/status-icon.js';
import alert_banner from './common/components/alert-banner.js';
+import file_upload from './common/components/file-upload.js';
import login_index from './login/index.js';
import login_controller from './login/controllers/login-controller.js';