Improving the file browser for importing metadata

Author: root

src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html

@@ -19,9 +19,9 @@
       <span><i class="fas fa-cloud-upload"
                aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
     <label class="btn btn-link m-0 p-0 ml-1">
-      <input class="form-control-file d-none" requireFile #file="ngModel" type="file" name="file-upload"
+      <input class="form-control-file d-none" type="file" name="file-upload"
              id="file-upload"
-             [ngModel]="fileObject" (ngModelChange)="setFile($event)">
+             (change)="handleFileInput($event)">
       {{'uploader.browse' | translate}}
     </label>
   </p>

src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts

@@ -54,7 +54,7 @@ export class FileDropzoneNoUploaderComponent implements OnInit {
   /**
    * The function to call when file is added
    */
-  @Output() onFileAdded: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onFileAdded: EventEmitter<File> = new EventEmitter<File>();
 
   /**
    * The uploader configuration options
@@ -83,15 +83,17 @@ export class FileDropzoneNoUploaderComponent implements OnInit {
   }
 
   @HostListener('window:drop', ['$event'])
-  onDrop(event: any) {
+  onDrop(event: DragEvent) {
     event.preventDefault();
+    event.stopPropagation();
   }
 
   @HostListener('window:dragover', ['$event'])
-  onDragOver(event: any) {
+  onDragOver(event: DragEvent) {
     // Show drop area on the page
     event.preventDefault();
-    if ((event.target as any).tagName !== 'HTML') {
+    event.stopPropagation();
+    if ((event.target as HTMLElement).tagName !== 'HTML') {
       this.isOverDocumentDropZone = observableOf(true);
     }
   }
@@ -105,11 +107,18 @@ export class FileDropzoneNoUploaderComponent implements OnInit {
     }
   }
 
+  public handleFileInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.setFile(input.files);
+    }
+  }
+
   /**
    * Set file
    * @param files
    */
-  setFile(files) {
+  public setFile(files: FileList) {
     this.fileObject = files.length > 0 ? files[0] : undefined;
     this.onFileAdded.emit(this.fileObject);
   }