You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
5.8 KiB
TypeScript
167 lines
5.8 KiB
TypeScript
import {Component, Input, OnInit} from '@angular/core';
|
|
import {properties} from '../../../environments/environment';
|
|
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
|
import {Subscription} from 'rxjs';
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'background-upload',
|
|
template: `
|
|
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
|
|
<!-- <span class="uk-text-middle">Attach binaries by dropping them here or</span>-->
|
|
<div *ngIf="!background.imageFile" class=" uk-placeholder uk-text-center uk-height-small">
|
|
<span uk-icon="icon: cloud-upload"></span>
|
|
<div uk-form-custom>
|
|
<span class="uk-link uk-margin-small-left" (click)="file.click()">upload an image</span>
|
|
</div>
|
|
</div>
|
|
<!-- <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>-->
|
|
<!--<div *ngIf="!background.imageFile" class=" uk-width-1-1"
|
|
style="margin-top: 7px;">
|
|
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
|
|
<div class=" uk-width-1-1 uk-flex uk-flex-center">
|
|
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
|
|
(click)="file.click()">
|
|
<icon name="cloud_upload" [flex]="true"></icon>
|
|
<span class="uk-margin-small-left">Upload a file</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>-->
|
|
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle ">
|
|
<div class="uk-card uk-card-default uk-text-center uk-width-expand">
|
|
<img class="uk-height-small uk-width-expand" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
|
|
</div>
|
|
<div class="uk-margin-left">
|
|
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
|
|
<icon name="remove"></icon>
|
|
</button>
|
|
</div>
|
|
<div class="uk-margin-small-left">
|
|
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
|
|
<icon name="edit"></icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin-medium-top">
|
|
<div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Position</div>
|
|
<!-- <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
|
|
<div class="input-box ">
|
|
<mat-form-field class="uk-width-1-1">
|
|
<!-- (ngModelChange)="positionChanged()"-->
|
|
<mat-select class="" [(ngModel)]="background.position" name="{{'select_type_'}}"
|
|
[disableOptionCentering]="true"
|
|
panelClass="">
|
|
<mat-option [value]="'top'">Top</mat-option>
|
|
<mat-option [value]="'center'">Center</mat-option>
|
|
<mat-option [value]="'bottom'">Bottom</mat-option>
|
|
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
`
|
|
})
|
|
|
|
export class BackgroundUploadComponent implements OnInit {
|
|
@Input() label:string = "";
|
|
@Input() background;
|
|
@Input() oldBackground;
|
|
// @Input() light:boolean;
|
|
@Input() communityId:string = "";
|
|
|
|
public file: File;
|
|
// public photo: string | ArrayBuffer;
|
|
private maxsize: number = 2000 * 1024;
|
|
properties;
|
|
private subscriptions: any[] = [];
|
|
|
|
|
|
constructor(private utilsService: UtilitiesService) {
|
|
}
|
|
|
|
|
|
ngOnInit() {
|
|
this.properties = properties;
|
|
}
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscription) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
|
|
removePhoto() {
|
|
|
|
if (typeof document != 'undefined') {
|
|
(<HTMLInputElement>document.getElementById("photo")).value = "";
|
|
}
|
|
// this.initPhoto();
|
|
console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
|
|
if(this.background.imageFile != this.oldBackground.imageFile){
|
|
this.deletePhoto();
|
|
}
|
|
this.background.imageFile = null;
|
|
this.file = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
public deletePhoto() {
|
|
if (this.background.imageFile) {
|
|
this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/community/' + this.communityId + "/" +this.background.imageFile).subscribe());
|
|
}
|
|
}
|
|
|
|
fileChangeEvent(event) {
|
|
if (event.target.files && event.target.files[0]) {
|
|
this.file = event.target.files[0];
|
|
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
|
|
UIkit.notification('You must choose a file with type: image/png or image/jpeg!', {
|
|
status: 'danger',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
this.removePhoto();
|
|
} else if (this.file.size > this.maxsize) {
|
|
UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', {
|
|
status: 'danger',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
this.removePhoto();
|
|
} else {
|
|
/*const reader = new FileReader();
|
|
reader.readAsDataURL(this.file);
|
|
reader.onload = () => {
|
|
this.background.imageFile = reader.result;
|
|
|
|
};*/
|
|
this.save();
|
|
}
|
|
}
|
|
}
|
|
|
|
public save() {
|
|
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.deletePhoto();
|
|
this.removePhoto();
|
|
this.background.imageFile = res.filename;
|
|
|
|
}, error => {
|
|
UIkit.notification("An error has been occurred during upload your image. Try again later", {
|
|
status: 'danger',
|
|
timeout: 6000,
|
|
pos: 'bottom-right'
|
|
});
|
|
}));
|
|
}
|
|
}
|
|
}
|