Fixes upload image functionality on Project.
This commit is contained in:
parent
61d8fa1181
commit
056b4c8371
|
@ -4,10 +4,11 @@ import { Observable } from 'rxjs';
|
||||||
import { environment } from '../../../../environments/environment';
|
import { environment } from '../../../../environments/environment';
|
||||||
import { ContentFile } from '../../model/project/project-listing';
|
import { ContentFile } from '../../model/project/project-listing';
|
||||||
import { BaseHttpService } from '../http/base-http.service';
|
import { BaseHttpService } from '../http/base-http.service';
|
||||||
|
import { BaseHttpParams } from '../../../common/http/base-http-params';
|
||||||
|
import { InterceptorType } from '../../../common/http/interceptors/interceptor-type';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class ProjectFileUploadService {
|
export class ProjectFileUploadService {
|
||||||
|
|
||||||
private actionUrl: string;
|
private actionUrl: string;
|
||||||
private headers: HttpHeaders;
|
private headers: HttpHeaders;
|
||||||
|
|
||||||
|
@ -16,6 +17,10 @@ export class ProjectFileUploadService {
|
||||||
}
|
}
|
||||||
|
|
||||||
uploadFile(formData: FormData): Observable<ContentFile> {
|
uploadFile(formData: FormData): Observable<ContentFile> {
|
||||||
return this.http.post(this.actionUrl + 'upload', formData, this.headers);
|
const params = new BaseHttpParams();
|
||||||
|
params.interceptorContext = {
|
||||||
|
excludedInterceptors: [InterceptorType.JSONContentType]
|
||||||
|
};
|
||||||
|
return this.http.post(this.actionUrl + 'upload', formData, { params: params });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,11 +8,14 @@
|
||||||
<table class="logo-table col-auto">
|
<table class="logo-table col-auto">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
|
<img mat-card-avatar (click)='editmode && imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
|
||||||
<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
|
<img mat-card-avatar (click)='editMode && imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*"/>
|
<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*"/>
|
||||||
|
<div>
|
||||||
|
<mat-error *ngIf="sizeError">File is too big!</mat-error>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -32,6 +32,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
|
||||||
formGroup: FormGroup = null;
|
formGroup: FormGroup = null;
|
||||||
host = environment.Server;
|
host = environment.Server;
|
||||||
editMode = false;
|
editMode = false;
|
||||||
|
sizeError = false;
|
||||||
|
maxFileSize: number = 1048576;
|
||||||
constructor(
|
constructor(
|
||||||
private projectService: ProjectService,
|
private projectService: ProjectService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -186,9 +188,10 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
|
||||||
|
|
||||||
public previewImage(event): void {
|
public previewImage(event): void {
|
||||||
const fileList: FileList | File = event.target.files;
|
const fileList: FileList | File = event.target.files;
|
||||||
|
const size: number = event.target.files[0].size; // Get file size.
|
||||||
|
this.sizeError = size > this.maxFileSize; // Checks if file size is valid.
|
||||||
const formdata: FormData = new FormData();
|
const formdata: FormData = new FormData();
|
||||||
|
if (!this.sizeError){
|
||||||
if (fileList instanceof FileList) {
|
if (fileList instanceof FileList) {
|
||||||
for (let i = 0; i < fileList.length; i++) {
|
for (let i = 0; i < fileList.length; i++) {
|
||||||
formdata.append('file', fileList[i]);
|
formdata.append('file', fileList[i]);
|
||||||
|
@ -201,3 +204,4 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
|
||||||
.subscribe(files => this.formGroup.get('files').patchValue(files));
|
.subscribe(files => this.formGroup.get('files').patchValue(files));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue