I am using ng2-file-upload for 2 different components but essentially the same code. I copy and pasted the component code that is working to the component code that is not. The issue is after I upload a file, nothing happens. I have to click upload several times before the uploader actually recognizes a file was uploaded. In the other component, it works perfectly.
Here is my component.ts code for the working file
import {Component, DoCheck, OnInit} from '@angular/core';
import {UiService} from "../../ui.service";
import {Transaction} from "../transaction.model";
import {TransactionService} from "../transaction.service";
import {FileUploader} from "ng2-file-upload";
import {UploadService} from "../../settings/account-settings/contracts/upload-service";
import {Router} from "@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 a review of your 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 is the code for the component that is not working
import {Component, DoCheck, OnInit} from '@angular/core';
import {UiService} from "../../ui.service";
import {Transaction} from "../transaction.model";
import {TransactionService} from "../transaction.service";
import {FileUploader} from "ng2-file-upload";
import {UploadService} from "../../settings/account-settings/contracts/upload-service";
import {Router} from "@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 a review of your 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 about these files, they both are used at the same time because they are modals. Here is the file they are called in as 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 at the code and spotting any differences but it is not working. Can anyone help?
