Simple uploader demo

This commit is contained in:
Denys Vuika
2016-04-26 10:23:36 +01:00
parent d6c6eb8fbd
commit 5f2df74639
3 changed files with 97 additions and 0 deletions

View File

@@ -57,6 +57,7 @@
<!-- Navigation. We hide it in small screens. --> <!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only"> <nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="" [routerLink]="['Files']">Files</a> <a class="mdl-navigation__link" href="" [routerLink]="['Files']">Files</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Uploader']">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Login']">Login</a> <a class="mdl-navigation__link" href="" [routerLink]="['Login']">Login</a>
</nav> </nav>
<!-- Right aligned menu below button --> <!-- Right aligned menu below button -->
@@ -80,6 +81,7 @@
<span class="mdl-layout-title">Alfresco</span> <span class="mdl-layout-title">Alfresco</span>
<nav class="mdl-navigation"> <nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">Files</a> <a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">Files</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Uploader']" (click)="hideDrawer()">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login</a> <a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login</a>
</nav> </nav>
</div> </div>

View File

@@ -22,6 +22,7 @@ import {MDL} from 'ng2-alfresco-core/material';
import {FilesComponent} from './components/files/files.component'; import {FilesComponent} from './components/files/files.component';
import {Login} from 'ng2-alfresco-login/ng2-alfresco-login'; import {Login} from 'ng2-alfresco-login/ng2-alfresco-login';
import {AuthRouterOutlet} from './components/router/AuthRouterOutlet'; import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
import {UploaderComponent} from './components/uploader/uploader.component';
declare var document: any; declare var document: any;
@@ -33,6 +34,7 @@ declare var document: any;
@RouteConfig([ @RouteConfig([
{path: '/home', name: 'Home', component: FilesComponent}, {path: '/home', name: 'Home', component: FilesComponent},
{path: '/', name: 'Files', component: FilesComponent, useAsDefault: true}, {path: '/', name: 'Files', component: FilesComponent, useAsDefault: true},
{path: '/uploader', name: 'Uploader', component: UploaderComponent},
{path: '/login', name: 'Login', component: Login} {path: '/login', name: 'Login', component: Login}
]) ])
export class AppComponent { export class AppComponent {

View File

@@ -0,0 +1,93 @@
import {Component, NgZone} from 'angular2/core';
import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
@Component({
selector: 'alfresco-uploader',
styles: [
`
:host .dropzone {
width: 100%;
height: 100px;
background-color: #f5f5f5;
margin-top: 2px;
margin-bottom: 2px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
text-align: center;
}
`
],
template: `
<div class="container">
<div class="row">
<h2>Upload File</h2>
<input type="file"
[ng-file-select]="options"
(onUpload)="handleUpload($event)">
<div>
Response: {{ uploadFile | json }}
</div>
</div>
<div class="row">
<h2>Drag and Drop file demo</h2>
<div class="col-md-4 col-md-offset-3">
<div [ng-file-drop]="options" (onUpload)="handleDropUpload($event)" class="dropzone">
Drop file here...
</div>
<div class="progress">
<div class="progress-bar" [style.width]="dropProgress + '%'"></div>
<span class="percent">{{ dropProgress }}%</span>
</div>
</div>
</div>
</div>
`,
directives: [UPLOAD_DIRECTIVES]
})
export class UploaderComponent {
uploadFile:any;
options:Object = {
url: 'http://192.168.99.100:8080/alfresco/service/api/upload',
withCredentials: true,
authToken: btoa('admin:admin'),
authTokenPrefix: 'Basic',
fieldName: 'filedata',
formFields: {
siteid: 'swsdp',
containerid: 'documentLibrary'
}
};
zone:NgZone;
dropProgress:number = 0;
dropResp:any[] = [];
constructor() {
this.zone = new NgZone({enableLongStackTrace: false});
}
handleUpload(data):void {
if (data && data.response) {
data = JSON.parse(data.response);
this.uploadFile = data;
}
}
handleDropUpload(data):void {
let index = this.dropResp.findIndex(x => x.id === data.id);
if (index === -1) {
this.dropResp.push(data);
} else {
this.zone.run(() => {
this.dropResp[index] = data;
});
}
let total = 0, uploaded = 0;
this.dropResp.forEach(resp => {
total += resp.progress.total;
uploaded += resp.progress.loaded;
});
this.dropProgress = Math.floor(uploaded / (total / 100));
}
}