htmlangularfile-uploadprimeng

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


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...

enter image description here

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:

enter image description here

Any suggestions?

Thanks in advance.


Solution

  • 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>