How to handle Angular 2 http update before Continuing - angularjs

Question

I have a service with an http Post
saveItem(item: Item): Observable<number> {
return this.http
.post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders())
.map(this.getIdFromItem)
.catch(this.handleError);
}
I call this in a save method in my component
save(item: Item): boolean {
if (!this.isValid()) {
return false;
}
this.itemService.saveItem(this.item)
.subscribe(id => {
this.item.id = id;
return true;
},
error => {return false;}
)
}
Within the same component, the user can upload an image related to the item - but I need to save the item before they upload the image.
{
if (!this.save(this.item)) {
alert('You cannot upload an image before saving the item');
return false;
}
The problem is that this.save() doesn't return after the save is complete, but immediately - so my image upload continues (and then fails on the server as it has no Id to associate with it).
I can move the 'isValid' to check before saving - but if the save fails on the server, it's too late.
Do I need to change my save to return an observable and then subscribe to it from my file upload? (if so could you show me some code how to do that?) or do I need to do something to get the value from the Observable before returning from the 'save' method (if so could you show me some code how to do that?)
I know there are other ways of solving this (upload the image anyway and associate it when the item is eventually saved, for example - but I don't like that idea - and I'd like an answer on this as much out of interest as solving this real problem.)
Thanks
the getIdFromItem gets the inserted item's Id from the JSON response - thought it worth mentioning.

Answer 1

You can use a flag that informs the rest of your code if you can upload or not.
service:
saveItem(item: Item): Observable<number> {
return this.http
.post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders())
.map(this.getIdFromItem)
.catch(this.handleError);
}
component:
canUpload: boolean = false;
save(item: Item): void {
this.canUpload = false;
this.itemService.saveItem(this.item)
.subscribe(id => {
this.item.id = id;
this.canUpload = true;
},
error => {return false;}
)
}
upload(): boolean {
if (!this.canUpload) {
console.log('You cannot upload an image before saving the item');
return false;
}
this.canUpload = false;
console.log('You can upload now');
// ...
}