file upload fix

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>
+            Angehängte Dateien
           </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>