I have an app with an Angular/html front-end with a p-fileUpload component that allows the user to upload multiple files at a time.
Which is easy enough, I just have to add a [multiple] to the component in the html file.
<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3"
chooseLabel="Choose File(s)..."
[multiple]="true">
</p-fileUpload>
Which allows the user to upload multiple files into a table that displays the name of each file and its size and looks like this...
What I would like to do is add editable columns to the p-fileUpload component such that the table can also accommodate metadata associated with each file.
The table would look something like this, in which the user can also add a Title, Document Type, and Comments associated with each file:
It would look something like this:
Any suggestions?
Thanks in advance.
Based on the official PrimeNG doc page you can indeed customize the upload component to display a table underneath.
Below, I have added an example by modifying the code from the wiki.
<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3"
chooseLabel="Choose File(s)..." [multiple]="true" (onSelect)="onFileSelect($event)" (onRemove)="onFileRemove($event)" (uploadHandler)="onUpload($event)">
<ng-template pTemplate="content">
<table class="ui-fileupload-files">
<thead>
<tr>
<th>File Name</th>
<th>Size</th>
<th>Title</th>
<th>Document Type</th>
<th>Comments</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let file of files; let i = index">
<td>{{ file.name }}</td>
<td>{{ formatSize(file.size) }}</td>
<td>
<input type="text" [(ngModel)]="file.metadata.title" placeholder="Enter Title">
</td>
<td>
<input type="text" [(ngModel)]="file.metadata.documentType" placeholder="Enter Document Type">
</td>
<td>
<input type="text" [(ngModel)]="file.metadata.comments" placeholder="Enter Comments">
</td>
<td>
<button type="button" (click)="removeFile(i)">Remove</button>
</td>
</tr>
</tbody>
</table>
</ng-template>
</p-fileUpload>