Display the date of uploading file with kendo UI and angular

401 views Asked by At

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 ?

0

There are 0 answers