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">
        <ngx-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"
        >
        </ngx-file-drop>
    </div>

    <!-- Directory selector, if no external directory is provided -->
    <div *ngIf="showDirectorySelector">
        <os-search-value-selector
            ngDefaultControl
            [formControl]="directorySelectionForm.get('parent_id')"
            [multiple]="false"
            [includeNone]="true"
            [noneTitle]="'Base folder'"
            listname="{{ 'Parent directory' | translate }}"
            [InputListValues]="directoryBehaviorSubject"
        ></os-search-value-selector>
    </div>

    <div>
        <span translate>Upload to:</span>&nbsp;
        <i *ngIf="selectedDirectoryId === null" translate>Base folder</i>
        <i *ngIf="selectedDirectoryId !== null">{{ getDirectory(selectedDirectoryId).title }}</i>
    </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>

            <!-- Access groups -->
            <ng-container matColumnDef="access_groups">
                <th mat-header-cell *matHeaderCellDef><span translate>Access groups</span></th>
                <td mat-cell *matCellDef="let file">
                    <os-search-value-selector
                        ngDefaultControl
                        [formControl]="file.form.get('access_groups_id')"
                        [multiple]="true"
                        listname="{{ 'Access groups' | translate }}"
                        [InputListValues]="groupsBehaviorSubject"
                    ></os-search-value-selector>
                </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>