#46 upload component

demo-shell-ng2/app/app.component.ts

@@ -21,9 +21,9 @@ import {MDL} from 'ng2-alfresco-core/material';
 import {FilesComponent} from './components/files/files.component';
 import {AlfrescoLoginComponent} from 'ng2-alfresco-login/ng2-alfresco-login';
 import {AuthRouterOutlet} from './components/router/AuthRouterOutlet';
-import {UploaderComponent} from './components/uploader/uploader.component';
 import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
 import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
+import {UploadComponent} from 'ng2-alfresco-upload/ng2-alfresco-upload';
 
 declare var document: any;
 
@@ -36,7 +36,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: '/uploader', name: 'Uploader', component: UploadComponent},
     {path: '/login', name: 'Login', component: AlfrescoLoginComponent}
 ])
 export class AppComponent {

demo-shell-ng2/app/components/uploader/uploader.component.ts

@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {Component, NgZone} from 'angular2/core';
-import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
-import {AlfrescoSettingsService} from 'ng2-alfresco-core/services';
-
-@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;
-
-    zone:NgZone;
-    dropProgress:number = 0;
-    dropResp:any[] = [];
-
-    constructor(settings:AlfrescoSettingsService) {
-        this.options = {
-            url: settings.host + '/alfresco/service/api/upload',
-            withCredentials: true,
-            authToken: btoa('admin:admin'),
-            authTokenPrefix: 'Basic',
-            fieldName: 'filedata',
-            formFields: {
-                siteid: 'swsdp',
-                containerid: 'documentLibrary'
-            }
-        };
-        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));
-    }
-}

demo-shell-ng2/app/css/app.css

@@ -2,4 +2,4 @@
 
 .p-10 {
     padding: 10px;
-}
+}

demo-shell-ng2/app/license_header.txt

@@ -13,4 +13,4 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
+ */

demo-shell-ng2/index.html

@@ -38,6 +38,7 @@
                 'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
                 'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
                 'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
+                'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
                 'ng2-translate': 'node_modules/ng2-translate',
                 'rxjs': 'node_modules/rxjs'
             },
@@ -58,6 +59,9 @@
                 'ng2-alfresco-login': {
                     defaultExtension: 'js'
                 },
+                'ng2-alfresco-upload': {
+                    defaultExtension: 'js'
+                },
                 'ng2-translate': {
                     defaultExtension: 'js'
                 },

demo-shell-ng2/package.json

@@ -48,7 +48,6 @@
     "material-design-icons": "^2.2.3",
     "material-design-lite": "^1.1.3",
     "ng2-translate": "^1.11.2",
-    "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.26",