improve file upload ui #16

tillkuhn · Jan 11, 2021 · 4735693 · 4735693
1 parent 6923fd2
commit 4735693
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 35 deletions.
diff --git a/ui/src/app/notes/notes.component.html b/ui/src/app/notes/notes.component.html
@@ -67,7 +67,7 @@
       </div>
     </form>
 
-    <!-- Existing Notes -->
+    <!-- Existing Notes table overview -->
     <!-- #mytable is a template variable which we will use to refresh table data by calling -->
     <table [dataSource]="data" class="app-overview-table" mat-table>
 

diff --git a/ui/src/app/places/edit/place-edit.component.html b/ui/src/app/places/edit/place-edit.component.html
@@ -59,8 +59,7 @@
 
       <!-- coordindates -->
       <mat-form-field class="app-full-width">
-        <input formControlName="coordinatesStr" matInput
-               placeholder="Coordinates (Lat, Lon)">
+        <input formControlName="coordinatesStr" matInput placeholder="Coordinates Lat(-), Lon(|)">
         <a (click)="checkCoordinates($event)" [routerLink]="" matSuffix title="Check Coordinates">
           <mat-icon>add_task</mat-icon>
         </a>

diff --git a/ui/src/app/shared/auth.service.ts b/ui/src/app/shared/auth.service.ts
@@ -77,7 +77,7 @@ export class AuthService {
         if (data.result) {
           this.http.get<User>(environment.apiUrlRoot + '/account').subscribe(
             user => {
-              this.logger.debug(`checkAuthenticated() $user`);
+              this.logger.debug(`checkAuthenticated() userId=${user.id}`);
               this.currentUserSubject.next(user);
             }
           );

diff --git a/ui/src/app/shared/components/file-upload/file-upload.component.html b/ui/src/app/shared/components/file-upload/file-upload.component.html
@@ -11,38 +11,39 @@
   </ng-container>
 
   <ng-container matColumnDef="tags">
+    <!-- small app icon size only works if we display mat header :-( -->
     <th *matHeaderCellDef mat-header-cell class="app-icon">Size</th>
     <td *matCellDef="let row" mat-cell>{{row.tags['Size'] | bytesize}}</td>
   </ng-container>
-  <!--
-  <tr mat-header-row *matHeaderRowDef="fileColumns"></tr>
-  -->
+  <tr *matHeaderRowDef="fileColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: fileColumns;" mat-row></tr>
 </table>
 
 <!-- upload panel -->
 
 <ng-container *ngIf="enableUpload">
-  <input (change)="selectFile($event)" id="customFile" type="file">
+  <!-- https://academind.com/tutorials/angular-image-upload-made-easy/ -->
+
+  <input type="file" style="display: none" (change)="onFileChangUpload($event)" #fileInput>
 
   <div class="app-button-row">
 
-    <button (click)="upload()" [disabled]="!selectedFiles" color="warn" mat-raised-button type="button">
+    <!-- always specify type="button" explicitly to avoid submit on click !  -->
+    <button (click)="fileInput.click()" color="primary" mat-raised-button type="button">
       <mat-icon>cloud_queue</mat-icon>
-      Push
-    </button>
-    &nbsp;
+      Upload
+    </button>&nbsp;
+
+    <button (click)="openFileInputDialog()" color="primary" mat-raised-button type="button">
+      <mat-icon>public</mat-icon>
+      Add URL
+    </button>&nbsp;
 
-    <!-- specify type="button"  explicitly to avoid submit  -->
     <button (click)="loadFiles()" color="primary" mat-raised-button type="button">
       <mat-icon>refresh</mat-icon>
-      Refresh
     </button>
     &nbsp;
-    <button (click)="openFileInputDialog()" color="primary" mat-raised-button type="button">
-      <mat-icon>public</mat-icon>
-      URL
-    </button>
+
     <span style="font-size: 75%; color: gray"> {{progressInfo}}</span>
   </div>
 </ng-container>

diff --git a/ui/src/app/shared/components/file-upload/file-upload.component.ts b/ui/src/app/shared/components/file-upload/file-upload.component.ts
@@ -36,11 +36,11 @@ export class FileUploadComponent implements OnInit {
   progressInfo: string;
 
   // Todo cleanup the blueprint contained much more than we need
-  selectedFiles: FileList;
+  // selectedFiles: FileList;
   currentFileUpload: File;
   progress: { percentage: number } = {percentage: 0};
   selectedFile = null;
-  changeImage = false;
+  // changeImage = false;
 
   constructor(private fileService: FileService,
               private logger: NGXLogger,
@@ -53,13 +53,13 @@ export class FileUploadComponent implements OnInit {
     this.loadFiles();
   }
 
-  change($event) {
-    this.changeImage = true;
-  }
+  // change($event) {
+  //   this.changeImage = true;
+  // }
 
-  changedImage(event) {
-    this.selectedFile = event.target.files[0];
-  }
+  // changedImage(event) {
+  //   this.selectedFile = event.target.files[0];
+  // }
 
   // https://medium.com/@altissiana/how-to-pass-a-function-to-a-child-component-in-angular-719fc3d1ee90
   loadFiles() {
@@ -80,9 +80,10 @@ export class FileUploadComponent implements OnInit {
   }
 
   // this one gets triggered by the upload button
-  upload() {
-    this.progress.percentage = 0;
-    this.currentFileUpload = this.selectedFiles.item(0);
+  onFileChangUpload(event) {
+    // this.progress.percentage = 0;
+    this.currentFileUpload = event.target.files[0]; // this.selectedFiles.item(0);
+    this.logger.info(`Uploading ${this.currentFileUpload} to server`);
     this.fileService.uploadFile(this.currentFileUpload, EntityType[this.entityType], this.entityId).subscribe(event => {
         if (event.type === HttpEventType.UploadProgress) {
           this.progress.percentage = Math.round(100 * event.loaded / event.total);
@@ -97,7 +98,7 @@ export class FileUploadComponent implements OnInit {
           });
           this.snackBar.open(`File Successfully uploaded: ${body}`, 'Close');
         }
-        this.selectedFiles = undefined;
+        this.currentFileUpload = undefined;
       }
     );
   }
@@ -110,11 +111,6 @@ export class FileUploadComponent implements OnInit {
     this.snackBar.open(`${fullpath} copied to clipboard`, 'Close');
   }
 
-  // needed?
-  selectFile(event) {
-    this.selectedFiles = event.target.files;
-  }
-
   openFileInputDialog(): void {
     const dialogRef = this.dialog.open(FileInputDialogComponent, {
       width: '350px',