node.js - angular 2 : file upload progress bar working incorrectly -
i using ng2-file-uploader upload single image file node server.
during upload, progress bar not indicating progress when click on "upload" button, though image saved node server.
but when click on "cancel" button, progress indicator shows progress.
component.ts
@component({ selector: 'button-view', template: ` <input type="file" class="form-control" name="single" ng2fileselect [uploader]="uploader" /> queue length: {{ uploader?.queue?.length }} <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 nowrap>{{ item.file.size/1024/1024 | number:'.2' }} mb</td> <td> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngstyle]="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span *ngif="item.issuccess"><i class="glyphicon glyphicon-ok"></i></span> <span *ngif="item.iscancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span *ngif="item.iserror"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isready || item.isuploading || item.issuccess"> <span class="glyphicon glyphicon-upload"></span> upload </button> <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isuploading"> <span class="glyphicon glyphicon-ban-circle"></span> cancel </button> <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> <span class="glyphicon glyphicon-trash"></span> remove </button> </td> </tr> </tbody> </table> <div> <div> queue progress: <div class="progress" style=""> <div class="progress-bar" role="progressbar" [ngstyle]="{ 'width': uploader.progress + '%' }"></div> </div> </div> </div> ` }) export class buttonviewcomponent implements viewcell, oninit { public uploader:fileuploader = new fileuploader({url:'http://localhost:5000/upload'}); .... have implemented single file upload, no multiple file upload.
where html wrong, image saving pefectly
reference followed:
https://ciphertrick.com/2016/10/24/file-upload-with-angular2-nodejs/
Comments
Post a Comment