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
                })}

Don't you just need to make a
with a *ngFor to display your 'queue' array? — Kapcash, Nov 28 '18 at 12:43
no, I want all the data to be displayed through single array so that one array i can use it for further functions. now I have old uploaded files data in 'Queue' array and new uploaded files in 'uploader.queue' array — Angular, Nov 29 '18 at 06:22
So you would like to join your two arrays, this.queue and uploader.queue, right? — Kapcash, Nov 29 '18 at 07:54
yes, i tried adding my old data in uploader.queue but the format is different, so i'm thinking to take the uploader.queue data in the component and from there, I'll manipulate that in queue array and add it. not sure this is good way to do it — Angular, Nov 29 '18 at 09:06

Kapcash · Answer 1 · 2018-12-04T09:06:52.220

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.

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

1 Answers1