Skip to content

Commit ef671ba

Browse files
liorvaliorva
committed
image upload fixed
1 parent 6b144e0 commit ef671ba

File tree

6 files changed

+72
-50
lines changed

6 files changed

+72
-50
lines changed

‎AgudaApp/platforms/android/app/src/main/assets/www/build/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎AgudaApp/src/pages/admin-panel/new-event/new-event.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,21 @@
1818
</ion-item>
1919
<ion-item>
2020
<ion-note *ngIf="uploadPercent != null" item-end>{{uploadPercent}}%</ion-note>
21-
<ion-icon *ngIf="imgFile != null && uploadPercent == 100" title="הסר" style="cursor: pointer;" name="trash" color='danger' item-end (click)='removeImage(imageUrl)'></ion-icon>
22-
<ion-icon *ngIf="uploadPercent == 100 || uploadPercent == null" style="cursor: pointer;" name="cloud-upload" color='primary' item-end (click)='upImg.click()'></ion-icon>
21+
<ion-icon *ngIf="(imgFile != null && uploadPercent == 100 && allowed) || fbImg" title="הסר" style="cursor: pointer;" name="trash" color='danger' item-end (click)='removeImage(imageUrl)'></ion-icon>
22+
<ion-icon *ngIf="allowed" style="cursor: pointer;" name="cloud-upload" color='primary' title="בחר תמונה" item-end (click)='upImg.click()'></ion-icon>
2323
<ion-label floating>תמונה - לינק או לחץ לבחירה</ion-label>
24-
<ion-input [disabled]="imgFile != null" [(ngModel)]="tmpUrl" type="url" name="Image URL"></ion-input>
25-
<input #upImg type="file" (change)="uploadImage($event)">
24+
<ion-input [disabled]="imgFile != null || fbImg" [(ngModel)]="tmpUrl" type="url" name="Image URL"></ion-input>
25+
<input #upImg type="file" (click)="upImg.value=null" (change)="uploadImage($event)">
2626
</ion-item>
2727
<ion-item>
2828
<ion-label floating>קישור לקניית כרטיסים</ion-label>
2929
<ion-input [(ngModel)]="purchaseURL" type="url" name="Purchase URL"></ion-input>
3030
</ion-item>
3131
<p></p>
3232
<ion-buttons>
33-
<button *ngIf="headline && date && content && (uploadPercent == null || uploadPercent == 100)" ion-button (click)="save()">{{actionButton}}</button>
33+
<button *ngIf="headline && date && content && allowed" ion-button (click)="save()">{{actionButton}}</button>
3434
<!-- Show dead button if form is not filled -->
35-
<button *ngIf="!headline || !date || !content || (uploadPercent != null && uploadPercent < 100)" ion-button color="darkGray">{{actionButton}}</button>
35+
<button *ngIf="!headline || !date || !content || !allowed" ion-button color="darkGray">{{actionButton}}</button>
3636
<button ion-button (click)="cancel()">ביטול</button>
3737
</ion-buttons>
3838
</ion-content>

‎AgudaApp/src/pages/admin-panel/new-event/new-event.ts‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export class NewEventPage {
2727

2828
imgFile: File = null;
2929
uploadPercent: number = null;
30+
allowed: boolean = true;
31+
fbImg: boolean = false;
3032

3133
constructor(public navCtrl: NavController,
3234
public navParams: NavParams,
@@ -42,9 +44,14 @@ export class NewEventPage {
4244
this.date = this.inputEvent.date.replace(" ", "T").replace("/", "-").replace("/", "-") + "Z";
4345
this.content = this.inputEvent.content;
4446
this.imageUrl = this.inputEvent.imageURL;
47+
this.tmpUrl = this.imageUrl;
4548
this.purchaseURL = this.inputEvent.purchaseURL;
4649
this.pageTitle = "ערוך אירוע";
4750
this.actionButton = "ערוך";
51+
if(this.imageUrl.includes('firebasestorage')){
52+
this.tmpUrl = this.imageUrl.substring(this.imageUrl.indexOf('_')+1, this.imageUrl.indexOf('?'));
53+
this.fbImg = true;
54+
}
4855
}
4956
}
5057

@@ -112,31 +119,34 @@ export class NewEventPage {
112119
}
113120

114121
uploadImage(event){
115-
console.log(event);
116122
if(event.target.files[0] != null){
117-
if(this.imgFile == event.target.files[0]){
123+
if(!event.target.files[0].type.includes('image')){
124+
alert('File should be image only.')
118125
return;
119126
}
120-
if(this.imgFile != null && this.imgFile != event.target.files[0]){
121-
this.removeImage(this.imageUrl);
127+
if(this.imgFile != null){
128+
if(this.imgFile.name == event.target.files[0].name){
129+
return;
130+
}
131+
else {
132+
this.removeImage(this.imageUrl);
133+
}
122134
}
123135
this.imgFile = <File>event.target.files[0];
124-
if(!this.imgFile.type.includes('image')){
125-
alert('File should be image only.')
126-
this.imgFile = null;
127-
return;
128-
}
136+
this.allowed = false;
137+
this.tmpUrl = this.imgFile.name;
129138
const task = this.eventProvider.uploadImg(this.imgFile);
130-
let sub1 = task.percentageChanges().subscribe(percent => {
131-
this.uploadPercent = Math.round(percent);
132-
if(percent == 100)
133-
sub1.unsubscribe();
134-
})
135-
let sub2 = task.downloadURL().subscribe(url => {
136-
this.imageUrl = url;
137-
sub2.unsubscribe();
139+
140+
task.on('state_changed', (progress) => {
141+
this.uploadPercent = Math.round((progress.bytesTransferred / progress.totalBytes) * 100);
142+
}, (err) => {
143+
144+
}, () => { //complete upload, wait for url.
145+
task.snapshot.ref.getDownloadURL().then(url => {
146+
this.imageUrl = url;
147+
this.allowed = true;
148+
})
138149
})
139-
this.tmpUrl = this.imgFile.name;
140150
}
141151
}
142152

@@ -146,5 +156,6 @@ export class NewEventPage {
146156
this.imageUrl = "";
147157
this.tmpUrl = "";
148158
this.uploadPercent = null;
159+
this.fbImg = false;
149160
}
150161
}

‎AgudaApp/src/pages/admin-panel/new-home-story/new-home-story.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
</ion-item>
2020
<ion-item>
2121
<ion-note *ngIf="uploadPercent != null" item-end>{{uploadPercent}}%</ion-note>
22-
<ion-icon *ngIf="imgFile != null && uploadPercent == 100" title="הסר" style="cursor: pointer;" name="trash" color='danger' item-end (click)='removeImage(imageUrl)'></ion-icon>
23-
<ion-icon *ngIf="uploadPercent == 100 || uploadPercent == null" style="cursor: pointer;" name="cloud-upload" color='primary' item-end (click)='upImg.click()'></ion-icon>
22+
<ion-icon *ngIf="(imgFile != null && uploadPercent == 100 && allowed) || fbImg" title="הסר" style="cursor: pointer;" name="trash" color='danger' item-end (click)='removeImage(imageUrl)'></ion-icon>
23+
<ion-icon *ngIf="allowed" style="cursor: pointer;" name="cloud-upload" color='primary' title="בחר תמונה" item-end (click)='upImg.click()'></ion-icon>
2424
<ion-label floating>תמונה - לינק או לחץ לבחירה</ion-label>
25-
<ion-input [disabled]="imgFile != null" [(ngModel)]="tmpUrl" type="url" name="Image URL"></ion-input>
26-
<input #upImg type="file" (change)="uploadImage($event)">
25+
<ion-input [disabled]="imgFile != null || fbImg" [(ngModel)]="tmpUrl" type="url" name="Image URL"></ion-input>
26+
<input #upImg type="file" (click)="upImg.value=null" (change)="uploadImage($event)">
2727
</ion-item>
2828
<p></p>
2929
<ion-buttons>
30-
<button *ngIf="headline && content && preview && (uploadPercent == null || uploadPercent == 100)" ion-button (click)="save()">{{actionButton}}</button>
30+
<button *ngIf="headline && content && preview && allowed" ion-button (click)="save()">{{actionButton}}</button>
3131
<!-- Show dead button if form is not filled -->
32-
<button *ngIf="!headline || !content || !preview || (uploadPercent != null && uploadPercent < 100)" ion-button color="darkGray">{{actionButton}}</button>
32+
<button *ngIf="!headline || !content || !preview || !allowed" ion-button color="darkGray">{{actionButton}}</button>
3333
<button ion-button (click)="cancel()">ביטול</button>
3434
</ion-buttons>
3535
</ion-content>

‎AgudaApp/src/pages/admin-panel/new-home-story/new-home-story.ts‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export class NewHomeStoryPage {
2424

2525
imgFile: File = null;
2626
uploadPercent: number = null;
27+
allowed: boolean = true;
28+
fbImg: boolean = false;
2729

2830
constructor(public navCtrl: NavController,
2931
public navParams: NavParams,
@@ -38,9 +40,14 @@ export class NewHomeStoryPage {
3840
this.headline = this.inputStory.headline;
3941
this.content = this.inputStory.content;
4042
this.imageUrl = this.inputStory.imageURL;
43+
this.tmpUrl = this.imageUrl;
4144
this.preview = this.inputStory.preview;
4245
this.pageTitle = "ערוך סיפור";
4346
this.actionButton = "ערוך";
47+
if(this.imageUrl.includes('firebasestorage')){
48+
this.tmpUrl = this.imageUrl.substring(this.imageUrl.indexOf('_')+1, this.imageUrl.indexOf('?'));
49+
this.fbImg = true;
50+
}
4451
}
4552
}
4653

@@ -112,31 +119,34 @@ export class NewHomeStoryPage {
112119
}
113120

114121
uploadImage(event){
115-
console.log(event);
116122
if(event.target.files[0] != null){
117-
if(this.imgFile == event.target.files[0]){
123+
if(!event.target.files[0].type.includes('image')){
124+
alert('File should be image only.')
118125
return;
119126
}
120-
if(this.imgFile != null && this.imgFile != event.target.files[0]){
121-
this.removeImage(this.imageUrl);
127+
if(this.imgFile != null){
128+
if(this.imgFile.name == event.target.files[0].name){
129+
return;
130+
}
131+
else {
132+
this.removeImage(this.imageUrl);
133+
}
122134
}
123135
this.imgFile = <File>event.target.files[0];
124-
if(!this.imgFile.type.includes('image')){
125-
alert('File should be image only.')
126-
this.imgFile = null;
127-
return;
128-
}
136+
this.allowed = false;
137+
this.tmpUrl = this.imgFile.name;
129138
const task = this.storyProvider.uploadImg(this.imgFile);
130-
let sub1 = task.percentageChanges().subscribe(percent => {
131-
this.uploadPercent = Math.round(percent);
132-
if(percent == 100)
133-
sub1.unsubscribe();
134-
})
135-
let sub2 = task.downloadURL().subscribe(url => {
136-
this.imageUrl = url;
137-
sub2.unsubscribe();
139+
140+
task.on('state_changed', (progress) => {
141+
this.uploadPercent = Math.round((progress.bytesTransferred / progress.totalBytes) * 100);
142+
}, (err) => {
143+
144+
}, () => { //complete upload, wait for url.
145+
task.snapshot.ref.getDownloadURL().then(url => {
146+
this.imageUrl = url;
147+
this.allowed = true;
148+
})
138149
})
139-
this.tmpUrl = this.imgFile.name;
140150
}
141151
}
142152

@@ -146,5 +156,6 @@ export class NewHomeStoryPage {
146156
this.imageUrl = "";
147157
this.tmpUrl = "";
148158
this.uploadPercent = null;
159+
this.fbImg = false;
149160
}
150161
}

‎AgudaApp/src/providers/database/database.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export class DatabaseProvider {
8585

8686
uploadImage(path: string, img: File){
8787
const _path = path + '/' + this.getCurrentTimestamp() + '_' + img.name;
88-
return this.storage.upload(_path, img);
88+
return this.storage.storage.ref(_path).put(img);
8989
}
9090

9191
deleteImage(url: string){

0 commit comments

Comments
 (0)