@rdkmaster/jigsaw-labs/component/upload/upload.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-upload-select-box" [class.jigsaw-upload-select-box-small]="_$uploadMode == 'selectAndList'"
       [style.flex-direction]="_$uploadMode == 'selectAndList' ? 'row' : 'column'"
       [style.height]="_$uploadMode == 'selectAndList' ? '30%' : '100%'"
       jigsaw-droppable (jigsawDragEnter)="_$fileDragEnterHandle($event)"
       (jigsawDragOver)="_$fileDragOverHandle($event)"
       (jigsawDragLeave)="_$fileDragLeaveHandle($event)" (jigsawDrop)="_$fileDropHandle($event)">
    <span class="jigsaw-upload-icon fa fa-upload"></span>
    <div class="jigsaw-upload-select-right">
        <p class="jigsaw-upload-prompt">{{'upload.dragHere' | translate}}</p>
        <j-button (click)="_$selectFile($event)">{{'upload.selectFile' | translate}}</j-button>
    </div>
    <input #fileInput class="jigsaw-upload-file-input" type='file'>
</div>

<div *ngIf="_$uploadMode == 'selectAndList'" class="jigsaw-upload-file-list-container">
    <j-upload-file-list [initData]="_$fileInfoList" [uploader]="this" [optionCount]="null"></j-upload-file-list>
</div>