Can you add extra columns to a p-fileUpload table to allow for metadata associated with each file?

Question

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.

Answer 1

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>