mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Simple uploader demo
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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 {
|
||||||
|
93
demo-shell-ng2/app/components/uploader/uploader.component.ts
Normal file
93
demo-shell-ng2/app/components/uploader/uploader.component.ts
Normal 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));
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user