<form>
    <!--Files Upload-->
    <div *ngIf="!uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
        <i class="material-icons">file_upload</i>

        <!--Multiple Files Upload-->
        <span *ngIf="multipleFiles">
            <label for="upload-multiple-files">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
            <input id="upload-multiple-files" data-automation-id="upload-multiple-files" type="file" name="uploadFiles"
                   (change)="onFilesAdded($event)"
                   multiple="multiple"
                   accept="{{acceptedFilesType}}"
                   #uploadFiles>
        </span>

        <!--Single Files Upload-->
        <span *ngIf="!multipleFiles">
            <label for="upload-single-file">{{'FILE_UPLOAD.BUTTON.UPLOAD_FILE' | translate}}</label>
            <input id="upload-single-file" data-automation-id="upload-single-file" type="file" name="uploadFiles"
                   (change)="onFilesAdded($event)"
                   accept="{{acceptedFilesType}}"
                   #uploadFiles>
        </span>
    </div>

    <!--Folders Upload-->
    <div *ngIf="uploadFolders" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-button--file">
        <i class="material-icons">file_upload</i>
        <label for="uploadFolder">{{'FILE_UPLOAD.BUTTON.UPLOAD_FOLDER' | translate}}</label>
        <input id="uploadFolder" data-automation-id="uploadFolder" type="file" name="uploadFiles"
               (change)="onDirectoryAdded($event)"
               multiple="multiple"
               accept="{{acceptedFilesType}}"
               webkitdirectory directory
               multiple #uploadFolders>
    </div>
</form>

<!--Notification bar-->
<div id="undo-notification-bar"  class="mdl-js-snackbar mdl-snackbar"
     #undoNotificationBar>
    <div class="mdl-snackbar__text"></div>
    <button data-automation-id="undo_upload_button" class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
</div>
