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/

enter image description here


Comments

Post a Comment

Popular posts from this blog

python - What's the Pythonic way to report nonfatal errors in a parser? -

a parser created reads recorded chess games file. api used this: import chess.pgn pgn_file = open("games.pgn") first_game = chess.pgn.read_game(pgn_file) second_game = chess.pgn.read_game(pgn_file) # ... sometimes illegal moves (or other problems) encountered. pythonic way handle them? raising exceptions error encountered. however, makes every problem fatal, in execution stops. often, there still useful data has been parsed , returned. also, can not continue parsing next data set, because still in middle of half-read data. accumulating exceptions , raising them @ end of game. makes error fatal again, @ least can catch , continue parsing next game. introduce optional argument this: game = chess.pgn.read_game(pgn_file, parser_info) if parser_info.error: # appears quite verbose. # can @ least make best of sucessfully parsed parts. # ... are of these or other methods used in wild? actually, are fatal errors -- @ least, far being able repro...
Read more

sql server - Deadlock occuring in Clustered Columnstore index -

Image
we using clustered columnstore index in our transaction table holding order fulfillments. table regularly updated different sessions. but, every session specific order job number , so, not trying update same row @ same time. but, facing deadlock issues due below scenarios between sessions. row group locking & page lock row group locking & row group locking this not specific stored procedure. due multiple stored procedures updating table, sequentially 1 one, part of order fulfillment. the sample schema of table simple: create table orderfulfillments ( orderjobnumber int not null, fulfilledindividualid bigint not null, isindividualsuppressed bit not null, suppressionreason varchar(100) null ) i have given sample deadlock graph reference. please let me know, approach can take avoid deadlock situation. need clustered columnstore index in table, doing aggregation operations see how many times individual been fulfilled already. ...
Read more

angular - Converting AngularJS deffered promise to AngularX observable for JSOM -

i converting angularjs application angular 4 gets data sharepoint. using jsom , executequeryasync() method. i data executequeryasync() server , store in observable in service. code have transform old version (which not me) below. struggle syntax when converting service. have absolute no plan how convert angular 4. getallstatusreps($scope) { const deferred = $q.defer(); const ctx = sp.clientcontext.get_current(); const web = ctx.get_web(); const statuslist = web.get_lists().getbytitle(this.statuslistname); const twitterlist = web.get_lists().getbytitle(this.twitterlistname); const statreps = statuslist.getitems(this.getqueryforallstatusreps()); const twitreps = twitterlist.getitems(this.getqueryforallstatusreps()); const querytext = ` <view> <rowlimit>1</rowlimit> <viewfields>{0}</viewfields> <query> <where><isnotnull><fieldref name=...
Read more