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 { 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 });
} }
} }

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

@ -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>

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; 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,
@ -88,8 +90,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
this.projectService.createProject(this.formGroup.value) this.projectService.createProject(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => this.onCallbackSuccess(), complete => this.onCallbackSuccess(),
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
} }
@ -127,8 +129,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
this.projectService.delete(this.project.id) this.projectService.delete(this.project.id)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
complete => { this.onCallbackSuccess() }, complete => { this.onCallbackSuccess() },
error => this.onCallbackError(error) error => this.onCallbackError(error)
); );
} }
}); });
@ -186,18 +188,20 @@ 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]);
}
} else {
formdata.append('file', fileList);
} }
} else { this.projectFileUploadService.uploadFile(formdata)
formdata.append('file', fileList);
}
this.projectFileUploadService.uploadFile(formdata)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(files => this.formGroup.get('files').patchValue(files)); .subscribe(files => this.formGroup.get('files').patchValue(files));
}
} }
} }