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()" customstyle="file-drop-style">
            <span translate>Drop files into this area OR select files</span>
        </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">
        <span translate> Upload </span>
    </button>
    <button type="button" mat-raised-button (click)="onClearButton()"><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>