How to display previously uploaded files using ng2-file-upload

Question

I'm using ng2-file-upload , the files get uploaded properly but I want to display previously uploaded files as well, I have called an API and stored all the previously uploaded files in an array in the component but how to display that on HTML page.

<div class="container">

    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            Multiple
            <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>

                <button type="button" class="btn btn-success btn-s"
                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s"
                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s"
                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

        </div>

    </div>

</div>

I have fetched the uploaded files in 'Queue' array, How i can i display that here

uploadfiles() {
        this.common.getData(url).subscribe(
            data => {
                this.queue.push({
                    name: file.Name,
                    id: file.Id,
                    size: file.Size
                })}

Answer 1

If you want to display both uploading files and already uploaded files in a single table, there are several ways to do.

You can display first the files in progess, then the files already uploaded:

<tbody>
  <tr *ngFor="let item of uploader.queue">
    <!-- Whatever you want to display -->
  </tr>
  <tr *ngFor="let uploadedFiles of queue">
    <!-- Whatever you want to display -->
  </tr>
</tbody>

Be careful to have the same number of so that the table have the same number of column (the progress column can be empty for the second part for example. Depends on how you want to display your data)

Or you can concat the two array in one, and display it with one *ngFor. For that, you will have to check the data structure to be consistent between the uploading files and the previous files you get via api.
Instead of picking only the name, size and id, you should add it this way:

this.queue.push({
  file: file
})}

Considering the "file" object is the same type as the files from uploader.queue.

There's nothing magic about it, everything depends on how you want to display the objects.