MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Fixes upload image functionality on Project.

This commit is contained in:
Diamantis Tziotzios 2019-02-12 13:48:24 +02:00
parent 61d8fa1181
commit 056b4c8371
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dmp-frontend/src/app/core/services/project/project-file-upload.service.ts
View File

@ -4,10 +4,11 @@ import { Observable } from 'rxjs';
import { environment } from '../../../../environments/environment';
import { ContentFile } from '../../model/project/project-listing';
import { BaseHttpService } from '../http/base-http.service';
import { BaseHttpParams } from '../../../common/http/base-http-params';
import { InterceptorType } from '../../../common/http/interceptors/interceptor-type';
@Injectable()
export class ProjectFileUploadService {
private actionUrl: string;
private headers: HttpHeaders;
@ -16,6 +17,10 @@ export class ProjectFileUploadService {
}
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 });
}
}

9
dmp-frontend/src/app/ui/project/editor/project-editor.component.html
View File

@ -8,11 +8,14 @@
<table class="logo-table col-auto">
<tr>
<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)='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/any?type=jpg'">
<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>
<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>
</tr>
</table>

30
dmp-frontend/src/app/ui/project/editor/project-editor.component.ts
View File

@ -32,6 +32,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
formGroup: FormGroup = null;
host = environment.Server;
editMode = false;
sizeError = false;
maxFileSize: number = 1048576;
constructor(
private projectService: ProjectService,
private route: ActivatedRoute,
@ -88,8 +90,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
this.projectService.createProject(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}
@ -127,8 +129,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
this.projectService.delete(this.project.id)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => { this.onCallbackSuccess() },
error => this.onCallbackError(error)
complete => { this.onCallbackSuccess() },
error => this.onCallbackError(error)
);
}
});
@ -186,18 +188,20 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
public previewImage(event): void {
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();
if (fileList instanceof FileList) {
for (let i = 0; i < fileList.length; i++) {
formdata.append('file', fileList[i]);
if (!this.sizeError){
if (fileList instanceof FileList) {
for (let i = 0; i < fileList.length; i++) {
formdata.append('file', fileList[i]);
}
} else {
formdata.append('file', fileList);
}
} else {
formdata.append('file', fileList);
}
this.projectFileUploadService.uploadFile(formdata)
this.projectFileUploadService.uploadFile(formdata)
.pipe(takeUntil(this._destroyed))
.subscribe(files => this.formGroup.get('files').patchValue(files));
}
}
}