Merge pull request #3232 from DSpace/backport-3230-to-dspace-8_x

[Port dspace-8_x] Improving the file browser for importing metadata
This commit is contained in:
kshepherd
2024-08-04 10:56:04 +02:00
committed by GitHub
2 changed files with 16 additions and 7 deletions

View File

@@ -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>

View File

@@ -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);
}