Angular Upload Component - Filename is not shown when file is selected

I'm working with Angular 16. I have a custom UploadComponent inside a ModalComponent, that has a issue after I choose a file from my PC. When I have to insert a new element, the component works fine. But, when I'm in edit mode, the file name of the file selected is not shown in html.

This is my UploadComponent.

export class UploadFileComponent implements OnInit, OnChanges {

/** the selected file */
selectedFile: File | null = null;
/** the file confirmed */
fileConfirmed: boolean = false;
/** The show view default flag */
public showDefaultView: boolean = true;
/** allegato */
@Input() allegato?: Allegato;
/** Emit the file to the parent component */
@Output() fileSelected = new EventEmitter<File>();


constructor(private changeDetector: ChangeDetectorRef,
private allegatiService: AllegatiService
) {}

/**
* ngOnInit
*/
public ngOnInit(): void {
this.loadViews();
}

/**
* ngOnChanges
* @param changes
*/
public ngOnChanges(changes: SimpleChanges): void {}

/**
* Handle the file selection
* @param event the file
*/
public onFileSelected(event: any) {
const file: File = event.target.files[0];
const allowedMimeTypes = ['image/png', 'image/jpeg', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];

if (file) {
if (!allowedMimeTypes.includes(file.type)) {
alert('Tipo file non valido. Sono permessi solo PNG, JPEG, PDF, and DOC/DOCX.');
this.selectedFile = null;
this.changeDetector.detectChanges();
return;
}

this.selectedFile = file;
this.fileConfirmed = false;
this.fileSelected.emit(this.selectedFile);
this.changeDetector.detectChanges();
}
}

/**
* Handle remove file
*/
public removeFile() {
this.selectedFile = null;
this.fileConfirmed = false;
this.fileSelected.emit(undefined);
this.changeDetector.detectChanges();
}

/**
* "Carica" button confirms the file and emits it to the parent
* @returns
*/
public onUpload() {
if (!this.selectedFile) {
return;
}
this.fileConfirmed = true;
this.fileSelected.emit(this.selectedFile);
this.changeDetector.detectChanges();
}

/**
* Handle the reset of the component
*/
public reset() {
this.selectedFile = null;
this.fileConfirmed = false;
this.fileSelected.emit(undefined);
this.changeDetector.detectChanges();
}

}


UploadComponent Html

<div class="upload-container">
<div class="row align-items-center g-1">
<ng-container *ngIf="showDefaultView else downloadView">
<ng-container *ngIf="!fileConfirmed">
<div class="col-auto">
<label for="fileInput" class="btn btn-xs btn-primary btn-file">
<i class="bi bi-upload"></i> {{ "upload.button.sceglifile" | translate }}
<input type="file" id="fileInput" (change)="onFileSelected($event)" hidden />
</label>
</div>
<div class="col">
<input type="text" [value]="selectedFile ? selectedFile.name : 'Nessun file selezionato'" readonly
class="form-control file-name-input" />
</div>
<div class="col-auto">
<button type="button" (click)="onUpload()" class="btn btn-xs btn-primary" [disabled]="!selectedFile">
{{ "upload.button.carica" | translate }}
</button>
</div>
</ng-container>
<ng-container *ngIf="fileConfirmed">
<div class="col-9">
<input type="text" [value]="selectedFile?.name || allegato?.nomeFile" readonly
class="form-control file-name-input" style="flex: 1;" />
</div>
<div class="col-3">
<button type="button" class="btn btn-danger btn-xs" (click)="removeFile()">
<i class="bi bi-trash"></i>
</button>
</div>
</ng-container>
</ng-container>
</div>
</div>

<ng-template #downloadView>
<div *ngIf="allegato" style="flex: 1;">
<!-- File download link -->
<a href="#" (click)="downloadAttachment(allegato.id)" download class="d-flex link-opacity-75-hover">
<i class="bi bi-file-earmark me-2"></i>
<span>{{ allegato!.nomeFile }}</span>
</a>
</div>
</ng-template>


SOLUTION:

I didn't understand the issue at all, but this solved. At the click, i set null to selectedFile.

<div class="input-group input-group-sm">
<button class="btn btn-primary" type="button" (click)="fileInput.click()">
{{ "upload.button.sceglifile" | translate }}
</button>
<input type="text" class="form-control" id="{{componentId}}-testo-file" [value]="testoFile" readonly>
<input type="file" class="d-none" id="{{componentId}}-file" #fileInput (click)="selectedFile = null"
(change)="onFileSelected($event)">

<button class="btn btn-primary" type="button" (click)="onUpload()">
{{ "upload.button.carica" | translate }}
</button>
</div>

Continue reading...