blob: 7fccabdeef99135f296c7581e849ebfa84a2aa5c [file] [log] [blame]
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);