Improving the file browser for importing metadata

This commit is contained in:
root
2024-08-01 13:04:17 -03:00
parent a6e3bc3e41
commit ce2abfe584
2 changed files with 16 additions and 7 deletions

View File

@@ -19,9 +19,9 @@
<span><i class="fas fa-cloud-upload" <span><i class="fas fa-cloud-upload"
aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span> 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"> <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" id="file-upload"
[ngModel]="fileObject" (ngModelChange)="setFile($event)"> (change)="handleFileInput($event)">
{{'uploader.browse' | translate}} {{'uploader.browse' | translate}}
</label> </label>
</p> </p>

View File

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