diff options
Diffstat (limited to 'app/common')
| -rw-r--r-- | app/common/components/file-upload.js | 60 | ||||
| -rw-r--r-- | app/common/styles/elements/file-upload.scss | 66 |
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; + } } } } |
