How do I display extra info using ng-template in uploader

[ttArbor]

I'm trying to pre-load some files in the uploader. My files looks like this: 

[{

    "name": "File1",

    "type": "PNG",

    "createdOn": "2020-03-25T00:47:04.65Z",

    "createdBy": "A",

    "size": 539388

  },

  {

    "name": "File2",

    "type": "png",

    "createdOn": "2020-03-24T23:51:30.867Z",

    "createdBy": "A",

    "size": 2782

  }]

How do I display createdOn and createdBy in an uploaded file besides Type, Name, and Size?  

Thank you

[Berly Christopher]

Hi Thao, 

Greetings from Syncfusion support. 

We would like to inform you that, FilesPropModel only have the definition for display the preload files defined properties such as “type, name, size”. So, if you need to display the additional information for the preload files, we suggest you to use our template support to display required details based on the data. Please refer the below documentation and attached sample.  

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/uploader/filesPropModel/  

 

[app.component.html] 

<ejs-uploader #preloadupload id='preloadfileupload' [asyncSettings]='path' [dropArea]='dropElement' 

(removing)='onFileRemove($event)'> 

<e-files> 

    <e-uploadedfiles name='Nature' size=11000 type='.png'></e-uploadedfiles> 

    <e-uploadedfiles name='TypeScript Succinctly' size=20000 type='.pdf' ></e-uploadedfiles> 

</e-files> 

<ng-template #template let-data> 

    <span class="fileListwrapper"> 

    <span class="icon template-icons sf-icon-{{data.type}}"></span> 

    <span class="name file-name">{{data.name}} ({{data.size}} bytes)</span> 

    <span class="upload-status">{{data.status}}</span> 

    </span> 

    <span class="e-icons e-file-remove-btn" title="Remove"></span> 

</ng-template> 

</ejs-uploader> 

 

[app.component.css]  

.file-name{ 

        display: block; 

    line-height: 55px; 

    margin-left: 15px; 

    } 

    .upload-status{ 

        color: green; 

      margin-left: 15px; 

    } 

 

 

  

Sample Link: https://stackblitz.com/edit/angular-hbniaj-3b39ty?file=app.component.css  

 

UG Link: https://ej2.syncfusion.com/angular/documentation/uploader/template/#file-list-template  

 

Demo Link: https://ej2.syncfusion.com/angular/demos/#/material/uploader/custom-drop-area  

Regards, 

Berly B.C