Commit e26263b2 authored by jcorvi's avatar jcorvi
Browse files

Merge branch 'upload-files' into 'develop'

upload files

See merge request !22
parents 029db132 35c5f62e
Pipeline #27759 passed with stage
in 2 minutes and 7 seconds
...@@ -9,6 +9,7 @@ import { FindingTabulatorComponent } from './finding-tabulator/finding-tabulator ...@@ -9,6 +9,7 @@ import { FindingTabulatorComponent } from './finding-tabulator/finding-tabulator
import {LoginComponent} from './login/login.component'; import {LoginComponent} from './login/login.component';
import {LogoutComponent} from './logout/logout.component'; import {LogoutComponent} from './logout/logout.component';
import { HistoryTrackingComponent } from './history-tracking/history-tracking.component'; import { HistoryTrackingComponent } from './history-tracking/history-tracking.component';
import { UploadFilesComponent } from './upload-files/upload-files.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'login', component: LoginComponent }, { path: 'login', component: LoginComponent },
{ path: 'logout', component: LogoutComponent }, { path: 'logout', component: LogoutComponent },
...@@ -27,6 +28,7 @@ const routes: Routes = [ ...@@ -27,6 +28,7 @@ const routes: Routes = [
}, },
{ path: 'documents', component: DocumentsComponent}, { path: 'documents', component: DocumentsComponent},
{ path: 'uploadFiles', component: UploadFilesComponent},
{ path: 'first_1', component: SrdomainLevelComponent}, { path: 'first_1', component: SrdomainLevelComponent},
{ path: 'second_2', component: SrdomainLevelComponent}, { path: 'second_2', component: SrdomainLevelComponent},
......
...@@ -26,6 +26,7 @@ import { HistoryTrackingComponent } from './history-tracking/history-tracking.co ...@@ -26,6 +26,7 @@ import { HistoryTrackingComponent } from './history-tracking/history-tracking.co
import {MatProgressSpinnerModule, MatProgressBarModule} from '@angular/material' import {MatProgressSpinnerModule, MatProgressBarModule} from '@angular/material'
import {OAuthModule} from "angular-oauth2-oidc"; import {OAuthModule} from "angular-oauth2-oidc";
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { UploadFilesComponent } from './upload-files/upload-files.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -42,7 +43,8 @@ import { environment } from '../environments/environment'; ...@@ -42,7 +43,8 @@ import { environment } from '../environments/environment';
SrdomaintemplateTabulatorComponent, SrdomaintemplateTabulatorComponent,
SrdomainLevelComponent, SrdomainLevelComponent,
LogoutComponent, LogoutComponent,
HistoryTrackingComponent HistoryTrackingComponent,
UploadFilesComponent
], ],
imports: [ imports: [
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
</div> </div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"> <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li><a *ngIf="loginService.getIsLogged()" routerLink="/uploadFiles" class="navbar-brand">Upload Annotations</a></li>
<li><a *ngIf="!loginService.getIsLogged()" routerLink="/login" class="navbar-brand">LogIn</a></li> <li><a *ngIf="!loginService.getIsLogged()" routerLink="/login" class="navbar-brand">LogIn</a></li>
<li><span *ngIf="loginService.getIsLogged()" class="navbar-brand">Welcome {{loginService.getUsername()}}</span></li> <li><span *ngIf="loginService.getIsLogged()" class="navbar-brand">Welcome {{loginService.getUsername()}}</span></li>
<li><a *ngIf="loginService.getIsLogged()" routerLink="/logout" class="navbar-brand">LogOut</a></li> <li><a *ngIf="loginService.getIsLogged()" routerLink="/logout" class="navbar-brand">LogOut</a></li>
......
import { TestBed } from '@angular/core/testing';
import { UploadFilesService } from './upload-files.service';
describe('UploadFilesService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: UploadFilesService = TestBed.get(UploadFilesService);
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from './../environments/environment';
@Injectable({
providedIn: 'root'
})
export class UploadFilesService {
private baseUrl = environment.apiUrl;
constructor(private http: HttpClient) { }
upload(files: FileList, allow_duplicates: Boolean): Observable<HttpEvent<any>> {
const formData: FormData = new FormData();
formData.append("allow_duplicates", String(allow_duplicates));
for (var i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
reportProgress: true,
responseType: 'json'
});
return this.http.request(req);
}
getFiles(): Observable<any> {
return this.http.get(`${this.baseUrl}/files`);
}
}
<div style="text-align:center">
<h1>
<app-header></app-header>
<app-menu></app-menu>
</h1>
</div>
<div class="w3-container">
<div *ngFor="let progressInfo of progressInfos" class="mb-2">
<span>{{ progressInfo.fileName }}</span>
<div class="progress">
<div
class="progress-bar progress-bar-info progress-bar-striped"
role="progressbar"
attr.aria-valuenow="{{ progressInfo.value }}"
aria-valuemin="0"
aria-valuemax="100"
[ngStyle]="{ width: progressInfo.value + '%' }"
>
{{ progressInfo.value }}%
</div>
</div>
</div>
<div class="w3-container">
<div class="form-check">
<input type="file" multiple (change)="selectFiles($event)" />
<input type="checkbox" class="form-check-input" [(ngModel)]="allow_duplicates"/>
<label class="form-check-label" title="You should select this option if you want to compare different pipelines executions.
You will have repeated documents with the same name, you can difference them throught the process date.">Allowing duplicates</label>
</div>
<label class="btn btn-default">
<button
class="btn btn-success"
[disabled]="!selectedFiles"
(click)="uploadFiles()"
>
Upload
</button>
</label>
</div>
<!-- <div class="alert alert-light" role="alert">{{ message_response }}</div> -->
<div *ngIf="message_response.length>0" class="card">
<div class="card-header">Messages:</div>
<ul
class="list-group list-group-flush"
*ngFor="let m of message_response "
>
<li class="list-group-item">
{{ m }}
</li>
</ul>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UploadFilesComponent } from './upload-files.component';
describe('UploadFilesComponent', () => {
let component: UploadFilesComponent;
let fixture: ComponentFixture<UploadFilesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UploadFilesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UploadFilesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { UploadFilesService } from 'src/app/upload-files.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-upload-files',
templateUrl: './upload-files.component.html',
styleUrls: ['./upload-files.component.css']
})
export class UploadFilesComponent implements OnInit {
selectedFiles: FileList;
progressInfos = [];
message = '';
message_response = [];
allow_duplicates : boolean = false;
fileInfos: Observable<any>;
constructor(private uploadService: UploadFilesService) { }
ngOnInit() {
this.fileInfos = this.uploadService.getFiles();
}
selectFiles(event) {
this.progressInfos = [];
this.selectedFiles = event.target.files;
}
uploadFiles() {
this.message = '';
this.uploadService.upload(this.selectedFiles, this.allow_duplicates).subscribe(
event => {
if (event.type === HttpEventType.UploadProgress) {
//this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.message_response = event.body;
//this.fileInfos = this.uploadService.getFiles();
}
},
err => {
//this.progressInfos[idx].value = 0;
this.message_response = err.error;
;
});
}
upload(idx, file) {
this.progressInfos[idx] = { value: 0, fileName: file.name };
this.uploadService.upload(file,false).subscribe(
event => {
if (event.type === HttpEventType.UploadProgress) {
this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
this.fileInfos = this.uploadService.getFiles();
}
},
err => {
this.progressInfos[idx].value = 0;
this.message = 'Could not upload the file:' + file.name;
});
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment