I have angular app with one modal dialog which has input file field and “Next” and “Back” buttons.
If I select a file and go to the next view and then going back to upload file dialog I would like to show previously selected file in input field.
Currently I’m getting this error :
ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement':
This input element accepts a filename, which may only be programmatically set to the empty string.
ois it possible to do somehow ?
<ds-modal>
<ds-box-content>
<ds-form-field>
<label ds-label for="file">Excel-File</label>
<input ds-input
#fileInput
id="file"
type="file"
formControlName="file"
[accept]="acceptFileType"
[labellingConfig]="labellingConfig"
(change)="extractUploadedFile($event)"
required
/>
</ds-form-field>
</ds-box-content>
<button
ds-button
*ngIf="showBackButton$ | async"
[variant]="'outline'"
class="modal-button"
(click)="onBackClick()"
>
Back
</button>
</ds-modal>
export class MyComponent implements OnInit, AfterViewInit {
@ViewChild('fileInput') fileInputRef!: ElementRef;
maxSize = 10;
acceptFileType: string = '.xlsx';
labellingConfig: DsInputLabellingConfig = {
empty: 'No File selected',
addFilesSingle: 'Add file',
fileCounter: '',
addFilesMultiple: ''
};
selectedFileType: string = FileTypeEnum.EXCEL;
reactiveForm = new FormGroup({
file: new FormControl('', {
validators: [Validators.required],
})
});
uploadedXlsxFile?: File;
onBackClick() {
this.selectedFileType = this.savedFileType ?? FileTypeEnum.EXCEL;
this.uploadedXlsxFile = this.savedUploadedXlsxFile;
if (this.uploadedXlsxFile) {
this.reactiveForm.controls['file'].setValue(this.uploadedXlsxFile.name);
} else {
this.reactiveForm.controls['file'].reset();
}
}
}