MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 8 Wiki Activity

Add message for file size limit in background-upload.

This commit is contained in:
Konstantinos Triantafyllou 2023-05-03 17:07:39 +03:00
parent ced4fe404d
commit 3b4ea6102c
1 changed files with 67 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/app/pages/customization/background-upload.component.ts
View File

@ -9,60 +9,64 @@ declare var UIkit;
selector: 'background-upload', selector: 'background-upload',
template: ` template: `
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/> <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div *ngIf="!background.imageFile" class=" upload uk-text-center uk-height-small uk-flex uk-flex-middle uk-flex-center uk-text-uppercase"> <div *ngIf="!background.imageFile"
class=" upload uk-text-center uk-height-small uk-flex uk-flex-middle uk-flex-center uk-text-uppercase">
<span uk-icon="icon: cloud-upload"></span> <span uk-icon="icon: cloud-upload"></span>
<div uk-form-custom> <div uk-form-custom>
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload image</span> <span class="uk-link uk-margin-small-left" (click)="file.click()">upload image</span>
</div> </div>
</div> </div>
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle "> <div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle ">
<div class="uk-width-1-1 uk-height-small" style = "background-size:cover" <div class="uk-width-1-1 uk-height-small" style="background-size:cover"
[style.background-image]=" getUrl()"> [style.background-image]=" getUrl()">
<a (click)="removePhoto()" uk-tooltip="Remove" class="uk-float-right uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link"> <a (click)="removePhoto()" uk-tooltip="Remove"
<icon name="delete" [defaultSize]="true" [flex]="true"></icon> class="uk-float-right uk-border-rounded uk-margin-top uk-margin-right uk-background-muted uk-button uk-button-link">
</a> <icon name="delete" [defaultSize]="true" [flex]="true"></icon>
</div> </a>
</div> </div>
</div>
<div *ngIf="background.imageFile" class="uk-margin-top"> <div *ngIf="background.imageFile" class="uk-margin-top">
<div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-small-bottom uk-margin-large-top">position</div> <div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-small-bottom uk-margin-large-top">position</div>
<div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="flat x-small" [(value)]="background.position" <div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="flat x-small"
[options]="['top','center','bottom']" > [(value)]="background.position"
</div> [options]="['top','center','bottom']">
</div>
</div> </div>
`, `,
styles:[` styles: [`
.upload{ .upload {
border: 1px dotted grey; border: 1px dotted grey;
} }
`] `]
}) })
export class BackgroundUploadComponent implements OnInit { export class BackgroundUploadComponent implements OnInit {
@Input() label:string = ""; @Input() label: string = "";
@Input() background; @Input() background;
@Input() oldBackground; @Input() oldBackground;
// @Input() light:boolean; // @Input() light:boolean;
@Input() communityId:string = ""; @Input() communityId: string = "";
public file: File; public file: File;
// public photo: string | ArrayBuffer; // public photo: string | ArrayBuffer;
private maxsize: number = 2000 * 1024; private maxsize: number = 2000 * 1024;
properties; properties;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private utilsService: UtilitiesService) { constructor(private utilsService: UtilitiesService) {
} }
ngOnInit() { ngOnInit() {
this.properties = properties; this.properties = properties;
} }
ngOnDestroy() { ngOnDestroy() {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) { if (subscription instanceof Subscription) {
@ -70,30 +74,29 @@ export class BackgroundUploadComponent implements OnInit {
} }
}); });
} }
removePhoto() { removePhoto() {
if (typeof document != 'undefined') { if (typeof document != 'undefined') {
(<HTMLInputElement>document.getElementById("photo")).value = ""; (<HTMLInputElement>document.getElementById("photo")).value = "";
} }
// this.initPhoto(); // this.initPhoto();
console.log(this.background.imageFile + " " + this.oldBackground.imageFile) console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
if(this.background.imageFile != this.oldBackground.imageFile){ if (this.background.imageFile != this.oldBackground.imageFile) {
this.deletePhoto(); this.deletePhoto();
} }
this.background.imageFile = null; this.background.imageFile = null;
this.file = null; this.file = null;
} }
public deletePhoto() { public deletePhoto() {
if (this.background.imageFile) { if (this.background.imageFile) {
this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" +this.background.imageFile).subscribe()); this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" + this.background.imageFile).subscribe());
} }
} }
fileChangeEvent(event) { fileChangeEvent(event) {
if (event.target.files && event.target.files[0]) { if (event.target.files && event.target.files[0]) {
this.file = event.target.files[0]; this.file = event.target.files[0];
@ -105,7 +108,7 @@ export class BackgroundUploadComponent implements OnInit {
}); });
this.removePhoto(); this.removePhoto();
} else if (this.file.size > this.maxsize) { } else if (this.file.size > this.maxsize) {
UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', { UIkit.notification('File exceeds size\'s limit (' + this.maxsize / 1024 + 'KB)! ', {
status: 'danger', status: 'danger',
timeout: 6000, timeout: 6000,
pos: 'bottom-right' pos: 'bottom-right'
@ -122,27 +125,34 @@ export class BackgroundUploadComponent implements OnInit {
} }
} }
} }
public save() { public save() {
if (this.file) { if (this.file) {
this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/"+ this.communityId + "/" + encodeURIComponent(this.communityId+"-"+this.label)+"?big=1", this.file).subscribe(res => { this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/community/" + this.communityId + "/" + encodeURIComponent(this.communityId + "-" + this.label) + "?big=1", this.file).subscribe(res => {
this.deletePhoto(); this.deletePhoto();
this.removePhoto(); this.removePhoto();
this.background.imageFile = res.filename; this.background.imageFile = res.filename;
}, error => { }, error => {
UIkit.notification("An error has been occurred during upload your image. Try again later", { if (error.error.message) {
status: 'danger', UIkit.notification('The maximum size of an image is 1MB, please check if your file exceeds this limit.', {
timeout: 6000, status: 'danger',
pos: 'bottom-right' timeout: 6000,
}); pos: 'bottom-right'
});
} else {
UIkit.notification("An error has been occurred during upload your image. Try again later", {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}
})); }));
} }
} }
getUrl() getUrl() {
{ return "url('" + (this.background.imageFile.indexOf('data:') == -1 ? (this.properties.utilsService +
return "url('" +(this.background.imageFile.indexOf('data:')==-1?(this.properties.utilsService + '/download/' + this.background.imageFile) : this.background.imageFile) + "')";
'/download/'+this.background.imageFile):this.background.imageFile) +"')";
} }
} }