| Dixsie Wolmers | 5fcee5a | 2019-11-19 15:24:00 -0600 | [diff] [blame^] | 1 | window.angular && (function(angular) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | const template = `<div class="file-upload"> |
| 5 | <label |
| 6 | for="uploadFile" |
| 7 | class="file-upload-btn btn btn-secondary" |
| 8 | ng-if="!$ctrl.file" |
| 9 | tabindex="0"> |
| 10 | Choose file |
| 11 | </label> |
| 12 | <input |
| 13 | id="uploadFile" |
| 14 | type="file" |
| 15 | file=$ctrl.file |
| 16 | class="file-upload-input" |
| 17 | accept="{{$ctrl.fileType}}"/> |
| 18 | <div class="file-upload-container" |
| 19 | ng-class="{ |
| 20 | 'file-upload-error' : $ctrl.fileStatus ==='error'}" |
| 21 | ng-if="$ctrl.file"> |
| 22 | <span class="file-filename"> |
| 23 | {{ $ctrl.file.name }}</span> |
| 24 | <status-icon |
| 25 | class="file-upload-status" |
| 26 | status="{{$ctrl.fileStatus}}"> |
| 27 | </status-icon> |
| 28 | <button |
| 29 | type="reset" |
| 30 | class="btn file-upload-reset" |
| 31 | ng-if="$ctrl.file.name || file" |
| 32 | ng-click="$ctrl.file = '';" |
| 33 | aria-label="remove selected file"> |
| 34 | <icon file="icon-close.svg" aria-hidden="true"></icon> |
| 35 | </button> |
| 36 | </div> |
| 37 | <div class="file-upload-btn"> |
| 38 | <button |
| 39 | type="submit" |
| 40 | class="btn btn-primary" |
| 41 | ng-click="$ctrl.onUpload(); $ctrl.file = '';" |
| 42 | ng-if="$ctrl.file" |
| 43 | aria-label="upload selected file"> |
| 44 | Upload |
| 45 | </button> |
| 46 | </div> |
| 47 | </div>` |
| 48 | |
| 49 | const controller = function() { |
| 50 | this.onUpload = () => { |
| 51 | this.uploadFile({file: this.file}); |
| 52 | }; |
| 53 | }; |
| 54 | |
| 55 | angular.module('app.common.components').component('fileUpload', { |
| 56 | template, |
| 57 | controller, |
| 58 | bindings: {uploadFile: '&', fileType: '@', fileStatus: '@'} |
| 59 | }) |
| 60 | })(window.angular); |