init uploader

WEB/package.json

@@ -27,6 +27,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "angular2-uuid": "^1.1.1",
     "core-js": "^2.5.4",
+    "ng2-file-upload": "^1.3.0",
     "odata-v4-ng": "^1.1.0",
     "rxjs": "^6.3.3",
     "zone.js": "~0.8.26"

WEB/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { SongEditComponent } from './components/songs/song-edit/song-edit.compon
 import { SongNewComponent } from './components/songs/song-new/song-new.component';
 import { SongFormComponent } from './components/songs/song-form/song-form.component';
 import { SongFilesComponent } from './components/songs/song-files/song-files.component';
+import { FileUploadModule } from 'ng2-file-upload';
 
 @NgModule({
   declarations: [
@@ -55,7 +56,8 @@ import { SongFilesComponent } from './components/songs/song-files/song-files.com
     MatSelectModule,
     MatTooltipModule,
 
-    FontAwesomeModule
+    FontAwesomeModule,
+    FileUploadModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -3,7 +3,15 @@
     <mat-card-content>
       <table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef>Angehängte Dateien</th>
+          <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>
 

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

@@ -9,3 +9,7 @@ button {
     color: #000;
   }
 }
+
+tr.file-over {
+    background: #f908;
+}

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

@@ -3,6 +3,8 @@ import { Song } from 'src/app/models/song.model';
 import { SongsService } from 'src/app/data/songs.service';
 import { DownloadService } from 'src/app/data/download.service';
 import { faFileUpload, faDownload } from '@fortawesome/free-solid-svg-icons';
+import { FileuploadFactory } from 'src/app/services/fileupload.factory';
+import { FileUploader } from 'ng2-file-upload';
 
 @Component({
   selector: 'app-song-files',
@@ -15,9 +17,13 @@ export class SongFilesComponent {
   public faFileUpload = faFileUpload;
   public faDownload = faDownload;
   public columns = ['name', 'action'];
+  public newFileUploader: FileUploader;
+
+  public fileOverNew = false;
 
   constructor(
     private downloadService: DownloadService,
+    private fileuploadFactory: FileuploadFactory,
     songService: SongsService,
     change: ChangeDetectorRef
   ) {
@@ -25,9 +31,11 @@ export class SongFilesComponent {
       if (_) {
         this.selectedSongId = _.ID;
         this.song = _;
+        this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
       } else {
         this.selectedSongId = 0;
         this.song = null;
+        this.newFileUploader = null;
       }
       change.markForCheck();
     });
@@ -35,4 +43,7 @@ export class SongFilesComponent {
 
   public onClickNew(): void {}
   public onClickDownload(id: number): void {}
+  public onFileOverNew(hover: boolean) {
+    this.fileOverNew = hover;
+  }
 }

WEB/src/app/services/fileupload.factory.ts

@@ -0,0 +1,18 @@
+import { base } from './../data/urls';
+import { Injectable } from '@angular/core';
+import { FileUploader } from 'ng2-file-upload';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileuploadFactory {
+  public provideForNewFiles(songId: number): FileUploader {
+    const uploader = new FileUploader({
+      url: base + '/api/songs/' + songId + '/files',
+      autoUpload: true,
+      isHTML5: true
+    });
+
+    return uploader;
+  }
+}