Skip to content

Commit babd891

Browse files
RubenCataRubenCata
committed
Set and Delete Image fixed
1 parent e64b4e1 commit babd891

File tree

4 files changed

+59
-42
lines changed

4 files changed

+59
-42
lines changed

‎frontend/src/app/components/tournament/tournament.component.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="d-flex flex-row">
99
<div class="tournament-img p-3">
1010

11-
<img *ngIf="tournament.image" src="api/tournaments/{{tournament.id}}/image" alt="Tournament Image" class="rounded-circle border-green bg-232323">
11+
<img *ngIf="tournament.image" src="api/tournaments/{{tournament.id}}/image?{{auxURL}}" alt="Tournament Image" class="rounded-circle border-green bg-232323">
1212
<img *ngIf="!tournament.image" src="../../../assets/images/product_02.jpg" alt="Tournament Image" class="rounded-circle border-green bg-232323">
1313

1414
</div>
@@ -554,11 +554,14 @@ <h3 class="tournament-bracket__round-title">Final</h3>
554554
<label for="tournamentImage" class="col-md-4 col-lg-3 col-form-label">Imagen del torneo</label>
555555
<div class="col-md-8 col-lg-9 tournament-img">
556556

557-
<img *ngIf="tournament.image" src="/api/tournaments/{{tournament.id}}/image"><br>
558-
<img *ngIf="!tournament.image" src="../../../assets/images/product_02.jpg">
559-
<input *ngIf="tournament.image" type='checkbox' name='removeImage' [(ngModel)]="removeImage"> <label>Remove image</label><br>
557+
<img *ngIf="tournament.image" src="/api/tournaments/{{tournament.id}}/image?{{auxURL}}">
558+
<img *ngIf="!tournament.image" src="../../../assets/images/product_02.jpg"><br>
560559

561-
<input #file type='file' name='imageField' accept=".jpg, .jpeg">
560+
<span *ngIf="tournament.image">
561+
<input type='checkbox' name='removeImage' [(ngModel)]="removeImage"> <label>Remove image</label><br>
562+
</span>
563+
564+
<input #file type='file' name='imageField' accept=".jpg, .jpeg">
562565

563566
</div>
564567
</div>

‎frontend/src/app/components/tournament/tournament.component.ts‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class TournamentComponent{
3535
file: any;
3636

3737
removeImage:boolean;
38+
auxURL: number = 1;
3839

3940

4041
constructor(private router: Router, activatedRoute: ActivatedRoute, public tournamentService: TournamentService,
@@ -214,42 +215,48 @@ export class TournamentComponent{
214215
}
215216

216217
this.tournamentService.updateTournament(updatedTournanent).subscribe(
217-
response => { this.uploadImage();
218-
this.getTournamentInit(this.id)
219-
},
220-
error => {
221-
if (error.status != 400) {
222-
console.error('Unexpected Error on deleteUser')
223-
}
218+
response => this.uploadImage(),
219+
error => {
220+
if (error.status != 400) {
221+
console.error('Unexpected Error on deleteUser')
224222
}
223+
}
225224
);
226225
}
227226

228227
uploadImage(): void {
229228

230229
const image = this.file.nativeElement.files[0];
231-
if (image) {
230+
if (this.removeImage) {
231+
this.tournamentService.deleteTournamentImage(this.id).subscribe(
232+
_ => this.afterUploadImage(),
233+
error => {
234+
if (error.status != 400) {
235+
console.error('Error deleting user image')
236+
}
237+
}
238+
);
239+
} else if(image){
232240
let formData = new FormData();
233241
formData.append("imageFile", image);
234-
this.tournamentService.setTournamentImage(this.id,formData).subscribe(
235-
_ => {this.afterUploadImage();this.getTournamentInit(this.id)},
236-
error => alert('Error uploading user image: ' + error)
237-
);
238-
} else if(this.removeImage){
239-
this.tournamentService.deleteTournamentImage(this.id).subscribe(
240-
_ => {this.afterUploadImage();
241-
this.getTournamentInit(this.id)},
242-
error => alert('Error deleting user image: ' + error)
242+
this.tournamentService.setTournamentImage(this.id, formData).subscribe(
243+
_ => {
244+
this.afterUploadImage()
245+
this.auxURL = this.auxURL +1
246+
},
247+
error => alert('Error uploading user image')
243248
);
244249
} else {
245250
console.log("Entramos en else")
246251
this.afterUploadImage();
247-
this.getTournamentInit(this.id);
248252
}
249253
}
250254

251255
private afterUploadImage(){
252-
this.router.navigate(['/tournament/'+this.id]);
256+
this.getTournamentInit(this.id)
257+
this.removeImage = false;
258+
let aux: any
259+
this.file = aux
253260
}
254261

255262
private formatDateReverse(date: string): string {

‎frontend/src/app/components/userProfile/userProfile.component.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
1414

1515

16-
<img *ngIf="hasImage()" src="api/users/image/{{loginService.currentUser().id}}" alt="User Image"
16+
<img *ngIf="hasImage()" src="api/users/image/{{loginService.currentUser().id}}?{{auxURL}}" alt="User Image"
1717
class="rounded-circle border-green bg-232323">
1818
<img *ngIf="!hasImage()" src="/assets/images/no_profile_photo.jpg" alt="User Image"
1919
class="rounded-circle border-green bg-232323">
@@ -178,12 +178,13 @@ <h6 class="pt-1"><em>{{userTournament.startDate}}</em></h6>
178178
<label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Imagen de Perfil </label>
179179

180180
<div class="col-md-8 col-lg-9">
181-
<img *ngIf="hasImage()" src="api/users/image/{{loginService.currentUser().id}}"><br>
182-
183-
<input *ngIf="hasImage()" type='checkbox' name='removeImage' [(ngModel)]="removeImage"> <label>Remove image</label><br>
184-
181+
<img *ngIf="hasImage()" src="api/users/image/{{loginService.currentUser().id}}?{{auxURL}}">
185182
<img *ngIf="!hasImage()" src="/assets/images/no_profile_photo.jpg"> <br>
186183

184+
<span *ngIf="hasImage()">
185+
<input type='checkbox' name='removeImage' [(ngModel)]="removeImage"> <label>Remove image</label><br>
186+
</span>
187+
187188
<input #file type='file' name='imageField' accept=".jpg, .jpeg">
188189
</div>
189190
</div>

‎frontend/src/app/components/userProfile/userProfile.component.ts‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export class UserProfileComponent{
2626
file: any;
2727

2828
removeImage:boolean;
29+
auxURL: number = 1;
2930

3031
constructor(private router: Router,public loginService: LoginService, public userService: UserService) {
3132

@@ -68,17 +69,14 @@ export class UserProfileComponent{
6869
user.country=country;
6970
user.phone = phone;
7071

71-
7272
this.userService.updateUser(user).subscribe(
73-
response => { this.uploadImage();},
73+
response => this.uploadImage(),
7474
error => {
7575
if (error.status != 400) {
7676
console.error('Unexpected Error on deleteUser')
7777
}
7878
}
7979
)
80-
this.loginService.reqIsLogged();
81-
8280
}
8381

8482
hasImage(){
@@ -88,17 +86,24 @@ export class UserProfileComponent{
8886
uploadImage(): void {
8987

9088
const image = this.file.nativeElement.files[0];
91-
if (image) {
89+
if (this.removeImage) {
90+
this.userService.deleteUserImage().subscribe(
91+
_ => this.afterUploadImage(),
92+
error => {
93+
if (error.status != 400) {
94+
console.error('Error deleting user image')
95+
}
96+
}
97+
);
98+
} else if(image){
9299
let formData = new FormData();
93100
formData.append("imageFile", image);
94101
this.userService.setUserImage(formData).subscribe(
95-
_ => this.afterUploadImage(),
96-
error => alert('Error uploading user image: ' + error)
97-
);
98-
} else if(this.removeImage){
99-
this.userService.deleteUserImage().subscribe(
100-
_ => this.afterUploadImage(),
101-
error => alert('Error deleting user image: ' + error)
102+
_ => {
103+
this.afterUploadImage()
104+
this.auxURL = this.auxURL +1
105+
},
106+
error => alert('Error uploading user image')
102107
);
103108
} else {
104109
console.log("Entramos en else")
@@ -107,6 +112,7 @@ export class UserProfileComponent{
107112
}
108113

109114
private afterUploadImage(){
110-
this.router.navigate(['/user_profile']);
115+
this.loginService.reqIsLogged();
116+
this.removeImage = false;
111117
}
112118
}

0 commit comments

Comments
 (0)