node.js - ng2-file-upload is not working correctly for one component but is for another -
i using ng2-file-upload 2 different components same code. copy , pasted component code working component code not. issue after upload file, nothing happens. have click upload several times before uploader recognizes file uploaded. in other component, works perfectly.
here component.ts code working file
import {component, docheck, oninit} '@angular/core'; import {uiservice} "../../ui.service"; import {transaction} "../transaction.model"; import {transactionservice} "../transaction.service"; import {fileuploader} "ng2-file-upload"; import {uploadservice} "../../settings/account-settings/contracts/upload-service"; import {router} "@angular/router"; @component({ selector: 'app-owner-post-eval', template: ` <div class="modal is-active" [ngstyle]="styleobject('ownerpost')"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">post evaluation</p> </header> <section class="modal-card-body"> <form *ngif="!uploaderloading"> <label class="label">post evaluation</label> <textarea class="textarea" [(ngmodel)]="ownerposteval" placeholder="please leave review of items current state." name="ownerposteval"></textarea> </form> <div class="field image-upload" *ngif="uploader?.queue?.length < 1" style="margin-top: 25px; text-align: center"> <label for="file-input" style="justify-content: center"> <img src="../../../assets/plus.png" alt="add photo" class="image is-32x32" style="margin: auto"> add image </label> <input class="file-input" id="file-input" type="file" name="photo" ng2fileselect [uploader]="uploader"> </div> <div class="spinner" *ngif="uploaderloading"></div> <div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngif="!uploaderloading"> <span *ngif="uploader?.queue?.length < 1" style="color: #111">no images uploaded</span> <span *ngfor="let item of uploader.queue" style="color: #111">{{item?.file?.name}}</span> </div> </section> <footer class="modal-card-foot"> <button class="button is-success" (click)="onuploadclicked()">save</button> <button class="button" (click)="onclosemodal()">cancel</button> </footer> </div> </div> `, styleurls: ['../transaction.component.css'] }) export class ownerpostevalcomponent implements oninit, docheck { ownerpostevalactive = false; ownerposteval: string; transaction: transaction; file: any; uploaderloading = false; devurl = 'xxxxxx'; url = 'xxxxx'; public uploader:fileuploader = new fileuploader({url: this.devurl, itemalias: 'photo'}); constructor( private router: router, private uploads: uploadservice, private trans: transactionservice, private uis: uiservice) {} ngoninit() { this.uploader.onafteraddingfile = (file)=> { file.withcredentials = false; }; this.uploader.oncompleteitem = (item:any, response:any, status:any, headers:any) => { let awsurl = 'xxxxx' + response; this.onupdatetransaction(awsurl); }; } ngdocheck() { this.ownerpostevalactive = this.uis.onreturneval('ownerpost'); } // pre eval onupdatetransaction(filename: string) { this.transaction = this.trans.onreturntransactionservice(); this.transaction.ownerpostreview = this.ownerposteval; this.transaction.ownerpostfilled = true; this.transaction.ownerpostimages.push(filename); this.trans.onupdatetransaction(this.transaction.id, this.transaction) .subscribe(update => { console.log(update); this.uploaderloading = false; this.router.navigate(['/profile']); this.uis.onflash('post evaluation posted successfully', 'success'); this.onclosemodal(); }, resp => { console.log(resp); this.uis.onflash('error posting post evaluation', 'error'); }) } onuploadclicked() { this.uploader.uploadall(); this.uploaderloading = true; } // ui styleobject(s: string): object { if (s === 'ownerpost') { if (this.ownerpostevalactive) { return {'height': '100%'}; } else { return {'height': 0}; } } } onclosemodal(){ this.uis.onclosemodal('ownerpost'); } } and here code component not working
import {component, docheck, oninit} '@angular/core'; import {uiservice} "../../ui.service"; import {transaction} "../transaction.model"; import {transactionservice} "../transaction.service"; import {fileuploader} "ng2-file-upload"; import {uploadservice} "../../settings/account-settings/contracts/upload-service"; import {router} "@angular/router"; @component({ selector: 'app-renter-post-eval', template: ` <div class="modal is-active" [ngstyle]="styleobject('renterpost')"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">post evaluation</p> </header> <section class="modal-card-body"> <form *ngif="!uploaderloading"> <label class="label">post evaluation</label> <textarea class="textarea" [(ngmodel)]="renterposteval" placeholder="please leave review of items current state." name="renterposteval"></textarea> </form> <div class="field image-upload" *ngif="uploader?.queue?.length < 1" style="margin-top: 25px; text-align: center"> <label for="file-input" style="justify-content: center"> <img src="../../../assets/plus.png" alt="add photo" class="image is-32x32" style="margin: auto"> add image </label> <input class="file-input" id="file-input" type="file" name="photo" ng2fileselect [uploader]="uploader"> </div> <div class="spinner" *ngif="uploaderloading"></div> <div class="content" style="color: #fdfdfd; font-size: 20px; text-align: center" *ngif="!uploaderloading"> <span *ngif="uploader?.queue?.length < 1" style="color: #111">no images uploaded</span> <span *ngfor="let item of uploader.queue" style="color: #111">{{item?.file?.name}}</span> </div> </section> <footer class="modal-card-foot"> <button class="button is-success" (click)="onuploadclicked()">save</button> <button class="button" (click)="onclosemodal()">cancel</button> </footer> </div> </div> `, styleurls: ['../transaction.component.css'] }) export class renterpostevalcomponent implements oninit, docheck { renterpostevalactive = false; renterposteval: string; transaction: transaction; file: any; uploaderloading = false; devurl = 'xxxxx'; url = 'xxxxx'; public uploader:fileuploader = new fileuploader({url: this.devurl, itemalias: 'photo'}); constructor( private router: router, private uploads: uploadservice, private trans: transactionservice, private uis: uiservice) {} ngoninit() { this.uploader.onafteraddingfile = (file)=> { console.log(file); file.withcredentials = false; }; this.uploader.oncompleteitem = (item:any, response:any, status:any, headers:any) => { let awsurl = 'xxxx' + response; this.onupdatetransaction(awsurl); }; } ngdocheck() { this.renterpostevalactive = this.uis.onreturneval('renterpost'); } // pre eval onupdatetransaction(filename: string) { this.transaction = this.trans.onreturntransactionservice(); this.transaction.renterpostreview = this.renterposteval; this.transaction.renterpostfilled = true; this.transaction.renterpostimages.push(filename); this.trans.onupdatetransaction(this.transaction.id, this.transaction) .subscribe(update => { console.log(update); this.uploaderloading = false; this.router.navigate(['/profile']); this.uis.onflash('post evaluation posted successfully', 'success'); this.onclosemodal(); }, resp => { console.log(resp); this.uis.onflash('error posting post evaluation', 'error'); }) } onuploadclicked() { this.uploader.uploadall(); this.uploaderloading = true; } // ui styleobject(s: string): object { if (s === 'renterpost') { if (this.renterpostevalactive) { return {'height': '100%'}; } else { return {'height': 0}; } } } onclosemodal(){ this.uis.onclosemodal('renterpost'); } } a note these files, both used @ same time because modals. here file called in directives.
<!-- evaluation modals --> <app-owner-post-eval></app-owner-post-eval> <app-renter-post-eval></app-renter-post-eval> <app-report-issue></app-report-issue> <app-message-modal></app-message-modal> <!-- main container --> <nav class="level"> <!-- left side --> <div class="level-item"> <h3 class="title">transaction</h3> </div> </nav> i've tried looking @ code , spotting differences not working. can help?
Comments
Post a Comment