OpenSlides/client/src/app/shared/components/media-upload-content/media-upload-content.component.html

<div class="upload-area">
    <input hidden type="file" #fileInput (change)="onSelectFile($event)" multiple />

    <div class="selection-area">
        <file-drop
            (onFileDrop)="onDropFile($event)"
            (click)="fileInput.click()"
            dropZoneLabel="{{ 'Drop files into this area OR click here to select files' | translate }}"
            contentClassName="file-drop-content-style"
            dropZoneClassName="file-drop-zone-style"
        >
        </file-drop>
    </div>

    <div class="table-container" *ngIf="uploadList.data.length > 0">
        <table mat-table [dataSource]="uploadList" class="mat-elevation-z8">
            <!-- Title -->
            <ng-container matColumnDef="title" sticky>
                <th mat-header-cell *matHeaderCellDef><span translate>Title</span></th>
                <td mat-cell *matCellDef="let file">
                    <mat-form-field>
                        <input matInput [value]="file.title" (input)="onChangeTitle($event.target.value, file)" />
                    </mat-form-field>
                </td>
            </ng-container>

            <!-- Original file name -->
            <ng-container matColumnDef="filename">
                <th mat-header-cell *matHeaderCellDef><span translate>File name</span></th>
                <td mat-cell *matCellDef="let file">{{ file.filename }}</td>
            </ng-container>

            <!-- File information -->
            <ng-container matColumnDef="information">
                <th mat-header-cell *matHeaderCellDef><span translate>File information</span></th>
                <td mat-cell *matCellDef="let file">
                    <div class="file-info-cell">
                        <span> <mat-icon [inline]="true">insert_drive_file</mat-icon> {{ file.mediafile.type }} </span>
                        <span>
                            <mat-icon [inline]="true">data_usage</mat-icon>
                            {{ getReadableSize(file.mediafile.size) }}
                        </span>
                    </div>
                </td>
            </ng-container>

            <!-- Hidden -->
            <ng-container matColumnDef="hidden">
                <th mat-header-cell *matHeaderCellDef><span translate>Hidden</span></th>
                <td mat-cell *matCellDef="let file">
                    <mat-checkbox
                        [checked]="file.hidden"
                        (change)="onChangeHidden($event.checked, file)"
                    ></mat-checkbox>
                </td>
            </ng-container>

            <!-- Remove Button -->
            <ng-container matColumnDef="remove">
                <th mat-header-cell *matHeaderCellDef><span translate>Remove</span></th>
                <td mat-cell *matCellDef="let file">
                    <button mat-icon-button color="warn" (click)="onRemoveButton(file)">
                        <mat-icon>close</mat-icon>
                    </button>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
    </div>
</div>

<!-- Upload and clear buttons -->
<div class="action-buttons">
    <button
        type="button"
        mat-raised-button
        (click)="onUploadButton()"
        color="primary"
        [disabled]="uploadList.data.length === 0"
    >
        <span translate> Upload </span>
    </button>
    <button type="button" mat-raised-button (click)="onClearButton()" [disabled]="uploadList.data.length === 0">
        <span translate> Clear list </span>
    </button>
</div>

<mat-card class="os-card" *ngIf="showProgress">
    <mat-progress-bar *ngIf="!parallel" mode="determinate" [value]="calcUploadProgress()"></mat-progress-bar>
    <mat-progress-bar *ngIf="parallel" mode="buffer"></mat-progress-bar>
</mat-card>