file upload fix

WEB/src/app/app.module.ts

@@ -17,6 +17,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { TableComponent } from './components/songs/table/table.component';
 import { SongsComponent } from './components/songs/songs.component';
@@ -43,7 +44,6 @@ import { FileUploadModule } from 'ng2-file-upload';
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
-    AppRoutingModule,
     HttpClientModule,
     ODataModule,
 
@@ -55,9 +55,11 @@ import { FileUploadModule } from 'ng2-file-upload';
     MatRadioModule,
     MatSelectModule,
     MatTooltipModule,
+    MatProgressBarModule,
 
     FontAwesomeModule,
     FileUploadModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

WEB/src/app/components/songs/song-files/song-files.component.html

@@ -4,22 +4,24 @@
       <table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>
-            <div
-              [uploader]="newFileUploader"
-              (fileOver)="onFileOverNew($event)"
-              [class.file-over]="fileOverNew"
-            >
             Angehängte Dateien
-            </div>
           </th>
           <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
         </ng-container>
 
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef>
+            <input
+              type="file"
+              ng2FileSelect
+              [uploader]="newFileUploader"
+              multiple
+              style="display:none"
+              #newFileUploaderRef
+            />
             <button
               mat-icon-button
-              (click)="onClickNew()"
+              (click)="newFileUploaderRef.click()"
               matTooltip="neue Datei hochladen"
               matTooltipPosition="left"
             >
@@ -38,7 +40,14 @@
           </td>
         </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="columns"></tr>
+        <tr
+          mat-header-row
+          *matHeaderRowDef="columns"
+          ng2FileDrop
+          [uploader]="newFileUploader"
+          (fileOver)="onFileOverNew($event)"
+          [class.file-over]="fileOverNew"
+        ></tr>
         <tr mat-row *matRowDef="let row; columns: columns"></tr>
       </table>
     </mat-card-content>

WEB/src/app/components/songs/song-files/song-files.component.ts

@@ -32,6 +32,8 @@ export class SongFilesComponent {
         this.selectedSongId = _.ID;
         this.song = _;
         this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
+        this.newFileUploader.onCompleteItem = () => songService.selectSong(_.ID);
+        this.newFileUploader.onProgressItem = () => change.markForCheck;
       } else {
         this.selectedSongId = 0;
         this.song = null;
@@ -41,7 +43,6 @@ export class SongFilesComponent {
     });
   }
 
-  public onClickNew(): void {}
   public onClickDownload(id: number): void {}
   public onFileOverNew(hover: boolean) {
     this.fileOverNew = hover;

WEB/src/app/components/songs/songs.component.html

@@ -1,5 +1,5 @@
 <app-table></app-table>
-<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
-<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>
 <app-song-edit [@blend] *ngIf="songsService.state === State.edit"></app-song-edit>
 <app-song-new [@blend] *ngIf="songsService.state === State.new"></app-song-new>
+<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
+<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>

WEB/src/styles.less

@@ -10,7 +10,7 @@ html {
 }
 
 .page-container {
-  position: absolute;
+  position: fixed;
   top: 20px;
   left: 20px;
   bottom: 20px;