I have a function that retrieves the file name.
The file name is displayed in an input field, but the background color of the input field is only visible when a file is selected and the file name is populated there.
I would like the background color to be visible regardless of whether there is a value present or not.
Initially, it looked like this:
<input * ngIf = "items.length> 0" type = "text" [(ngModel)] = "items [0] .filename" class = "form-control Input-Metadata">
I want to change it to:
<input * ngIf = "items.length>= 0" type = "text" [(ngModel)] = "items [0] .filename" class = "form-control Input-Metadata">
However, when I implement this change, I encounter the following error: Cannot read property 'filename' of undefined.
Could someone provide assistance?
component.ts
for (let index = 0; index < files.length; index++) {
const item: any = {
filename: event.target.files[index].name.split('.')[0],
fileType: event.target.files[index].type.split("image/").join(""),
fileSize: event.target.files[index].size,
};
this.filename = item.filename;
this.fileType = item.fileType;
this.fileSize = item.fileSize;
this.items.push(item);
const reader = new FileReader();
reader.onload = (e: any) => {
item.url = e.target.result;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
item.sizeH = image.width;
item.sizeV = image.height;
self.sizeH = item.sizeH;
self.sizeV = item.sizeV;
};
}
formData.append('file', files[index]);
reader.readAsDataURL(files[index]);
}