1window.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);