From 5f2df74639b48849438e5885f5764c85342ccc49 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 26 Apr 2016 10:23:36 +0100 Subject: [PATCH] Simple uploader demo --- demo-shell-ng2/app/app.component.html | 2 + demo-shell-ng2/app/app.component.ts | 2 + .../components/uploader/uploader.component.ts | 93 +++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 demo-shell-ng2/app/components/uploader/uploader.component.ts diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html index ba0533b794..d3729187c9 100644 --- a/demo-shell-ng2/app/app.component.html +++ b/demo-shell-ng2/app/app.component.html @@ -57,6 +57,7 @@ @@ -80,6 +81,7 @@ Alfresco diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index 828d5c55ac..31de410d17 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/demo-shell-ng2/app/app.component.ts @@ -22,6 +22,7 @@ import {MDL} from 'ng2-alfresco-core/material'; import {FilesComponent} from './components/files/files.component'; import {Login} from 'ng2-alfresco-login/ng2-alfresco-login'; import {AuthRouterOutlet} from './components/router/AuthRouterOutlet'; +import {UploaderComponent} from './components/uploader/uploader.component'; declare var document: any; @@ -33,6 +34,7 @@ declare var document: any; @RouteConfig([ {path: '/home', name: 'Home', component: FilesComponent}, {path: '/', name: 'Files', component: FilesComponent, useAsDefault: true}, + {path: '/uploader', name: 'Uploader', component: UploaderComponent}, {path: '/login', name: 'Login', component: Login} ]) export class AppComponent { diff --git a/demo-shell-ng2/app/components/uploader/uploader.component.ts b/demo-shell-ng2/app/components/uploader/uploader.component.ts new file mode 100644 index 0000000000..5cdb55dfdc --- /dev/null +++ b/demo-shell-ng2/app/components/uploader/uploader.component.ts @@ -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: ` +
+
+

Upload File

+ +
+ Response: {{ uploadFile | json }} +
+
+
+

Drag and Drop file demo

+
+
+ Drop file here... +
+
+
+ {{ dropProgress }}% +
+
+
+
+ `, + 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)); + } +}