I am using kendo UI to upload files and I want to display the name, the size and the date of uploaded files.
This is my component.html :
<kendo-upload class="mobile-max-height-240" style="margin-top:2%;"
(select)="onSelect($event)" (remove)="onRemove($event)"[restrictions]="fileRestrictions"
[(ngModel)]="addedfiles">
<kendo-upload-messages
[dropFilesHere]="''"
[select]="'Add'"
[retry]="'retry'"
[remove]="'cancel'">
</kendo-upload-messages>
<span style ="color : black ; font-size: xx-small; padding-left: 60%;"> Date: {{date |
date : 'dd/mm/y'}}</span>
</kendo-upload>
And this is my component.ts:
export class FilesUploadComponent implements OnInit {
date = new Date();
addedfiles : Array<any> = [];
fileRestrictions: FileRestrictions = {
allowedExtensions: ['.jpg', '.png', '.jpeg', '.doc', '.docx','.pdf'],
maxFileSize: 5000000
};
constructor(private router : Router) { }
ngOnInit() {
}
// select a file from your device
public onSelect(ev: any): void {
ev.files.forEach((file: FileInfo) => {
if (file.rawFile) {
const reader = new FileReader();
if(this.fileRestrictions.allowedExtensions.includes(file.extension.toLowerCase()))
{reader.onloadend = () => {
this.addedfiles.push({ ...file, src: reader.result as string});
};
reader.readAsDataURL(file.rawFile);
}
}
});
}
// remove a selected file
public onRemove(ev: RemoveEvent): void {
ev.files.forEach((file: FileInfo) => {
this.addedfiles = this.addedfiles.filter(f => f.uid !== file.uid);
});
}
But the date is not displayed ! Anyone help me ?