How to use ng2-file-upload with ngx-datatable in place of simple table to access file details #1139

New Issue

2020-01-23T06:27:48Z

manojasati commented

2020-01-23 06:27:48 +00:00

(Migrated from github.com)

My html code is
`

Upload queue

Queue length: {{ uploader?.queue?.length }}

      <input type="text" class="form-control mb-3 mt-3" placeholder="Type to filter the title column..." required
      (keyup)='updateFilter($event)'>
      <ngx-datatable class="mb-3 ml-0 mr-0" 
      [rows]="uploader.queue" 
      [columnMode]="'flex'" 
      [headerHeight]="50" 
      [footerHeight]="0" 
      [rowHeight]="'auto'">
        <ngx-datatable-column name="Name" [flexGrow]="2">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.file?.name }}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Size" *ngIf="uploader.options.isHTML5" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row?.file?.size/1024/1024 | number:'.2' }} MB
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Progress" *ngIf="uploader.options.isHTML5" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <div class="progress" style="margin-bottom: 0;">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
              </div>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Status" [flexGrow]="1">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <span *ngIf="row.isSuccess"><i class="fa fa-check"></i></span>
            <span *ngIf="row.isCancel"><i class="fa fa-ban"></i></span>
            <span *ngIf="row.isError"><i class="fa fa-remove"></i></span>
                
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Action" [flexGrow]="2">
            <ng-template let-row="row" ngx-datatable-cell-template>
                  <button type="button" class="btn btn-success btn-sm"
                (click)="row.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                <span class="fa fa-upload"></span> Upload
              </button>
              <button type="button" class="btn btn-warning btn-sm"
                (click)="row.cancel()" [disabled]="!item.isUploading">
                <span class="fa fa-ban"></span> Cancel
              </button>
              <button type="button" class="btn btn-danger btn-sm"
                (click)="row.remove()">
                <span class="fa fa-trash"></span> Remove
              </button>
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>`

and typesript code is
`uploader: FileUploader = new FileUploader({
isHTML5: true,

});`
please suggest what i am doing wrong

My html code is `<p>Upload queue</p> <p>Queue length: {{ uploader?.queue?.length }}</p> <input type="text" class="form-control mb-3 mt-3" placeholder="Type to filter the title column..." required (keyup)='updateFilter($event)'> <ngx-datatable class="mb-3 ml-0 mr-0" [rows]="uploader.queue" [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="0" [rowHeight]="'auto'"> <ngx-datatable-column name="Name" [flexGrow]="2"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row?.file?.name }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Size" *ngIf="uploader.options.isHTML5" [flexGrow]="1"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row?.file?.size/1024/1024 | number:'.2' }} MB </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Progress" *ngIf="uploader.options.isHTML5" [flexGrow]="1"> <ng-template let-row="row" ngx-datatable-cell-template> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> </div> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Status" [flexGrow]="1"> <ng-template let-row="row" ngx-datatable-cell-template> <span *ngIf="row.isSuccess"><i class="fa fa-check"></i></span> <span *ngIf="row.isCancel"><i class="fa fa-ban"></i></span> <span *ngIf="row.isError"><i class="fa fa-remove"></i></span> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Action" [flexGrow]="2"> <ng-template let-row="row" ngx-datatable-cell-template> <button type="button" class="btn btn-success btn-sm" (click)="row.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> <span class="fa fa-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-sm" (click)="row.cancel()" [disabled]="!item.isUploading"> <span class="fa fa-ban"></span> Cancel </button> <button type="button" class="btn btn-danger btn-sm" (click)="row.remove()"> <span class="fa fa-trash"></span> Remove </button> </ng-template> </ngx-datatable-column> </ngx-datatable>` and typesript code is `uploader: FileUploader = new FileUploader({ isHTML5: true, });` please suggest what i am doing wrong

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1139