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

116 lines
4.8 KiB
HTML
Raw Normal View History

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