116 lines
4.8 KiB
HTML
116 lines
4.8 KiB
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>
|
|
<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>
|