#878 doc and demo upload component

ng2-components/ng2-alfresco-upload/README.md

@@ -1,4 +1,5 @@
 # Alfresco Upload Component for Angular 2
+
 <p>
   <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
     <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
@@ -31,58 +32,66 @@
   </a>
 </p>
 
-### Node
+## Prerequisites
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
+
+Before you start using this development framework, make sure you have installed all required software and done all the
+necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
 
 ## Install
 
-```sh
+Follow the 3 steps below:
-npm install --save ng2-alfresco-upload
-```
 
-Components included:
+1. Npm
-
-- [Upload button](#upload-button)
-- [Drag and Drop](#drag-and-drop)
-
-### Upload button
-This component, provide a buttons to upload files to alfresco.
-
-#### Dependencies
-
-Add the following dependency to your index.html:
-
-```html
-<script src="node_modules/alfresco-js-api/bundle.js"></script>
-```
-
-The following component needs to be added to your systemjs.config: 
-
-- ng2-translate
-- ng2-alfresco-core
-- ng2-alfresco-upload
-
-Please refer to the following example to have an idea of how your systemjs.config should look like :
-
-https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
-
-#### Style
-The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
-design dependency to your project:
 
     ```sh
-npm install --save material-design-icons material-design-lite
+    npm install ng2-alfresco-upload --save
     ```
 
-Also make sure you include these dependencies in your .html page:
+2. Html
+
+    Include these dependencies in your index.html page:
 
     ```html
+
       <!-- Google Material Design Lite -->
       <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
       <script src="node_modules/material-design-lite/material.min.js"></script>
       <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+
+      <!-- Polyfill(s) for Safari (pre-10.x) -->
+      <script src="node_modules/intl/dist/Intl.min.js"></script>
+      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
+
+      <!-- Polyfill(s) for older browsers -->
+      <script src="node_modules/core-js/client/shim.min.js"></script>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
+      <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
+
+      <!-- Polyfill(s) for dialogs -->
+      <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+      <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+      <style>._dialog_overlay { position: static !important; } </style>
+
+      <!-- Modules  -->
+      <script src="node_modules/zone.js/dist/zone.js"></script>
+      <script src="node_modules/reflect-metadata/Reflect.js"></script>
+      <script src="node_modules/systemjs/dist/system.src.js"></script>
+
     ```
 
+3. SystemJs
+
+    Add the following components to your systemjs.config.js file:
+
+    - ng2-translate
+    - alfresco-js-api
+    - ng2-alfresco-core
+    - ng2-alfresco-upload
+
+    Please refer to the following example file: [systemjs.config.js](demo/systemjs
+    .config.js) .
+
+
 #### Basic usage
 
 
@@ -101,41 +110,53 @@ Also make sure you include these dependencies in your .html page:
 Example of an App that declares upload button component :
 
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
-import { HTTP_PROVIDERS } from '@angular/http';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-    ALFRESCO_CORE_PROVIDERS,
+import { UploadModule } from 'ng2-alfresco-upload';
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
-import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
 
 @Component({
-    selector: 'my-app',
+    selector: 'alfresco-app-demo',
     template: `<alfresco-upload-button [showUdoNotificationBar]="true"
                                        [uploadFolders]="false"
                                        [multipleFiles]="false"
                                        [acceptedFilesType]="'.jpg,.gif,.png,.svg'"
-                                       (onSuccess)="customMethod($event)">
+                                       (onSuccess)="onSuccess($event)">
                </alfresco-upload-button>
-               <file-uploading-dialog></file-uploading-dialog>`,
+               <file-uploading-dialog></file-uploading-dialog>`
-    directives: [ALFRESCO_ULPOAD_COMPONENTS]
 })
 export class MyDemoApp {
-    constructor(alfrescoSettingsService: AlfrescoSettingsService) {
+
-        alfrescoSettingsService.host = 'http://myalfrescoip';
+    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+        settingsService.ecmHost = 'http://localhost:8080';
+
+        this.authService.login('admin', 'admin').subscribe(
+            ticket => {
+                console.log(ticket);
+            },
+            error => {
+                console.log(error);
+            });
     }
 
-    public customMethod(event: Object): void {
+    public onSuccess(event: Object): void {
         console.log('File uploaded');
     }
 }
 
-bootstrap(MyDemoApp, [
+@NgModule({
-    HTTP_PROVIDERS,
+    imports: [
-    ALFRESCO_CORE_PROVIDERS,
+        BrowserModule,
-    UploadService
+        CoreModule.forRoot(),
-]);
+        UploadModule.forRoot()
+    ],
+    declarations: [ MyDemoApp ],
+    bootstrap:    [ MyDemoApp ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
 
 ```
 #### Events
@@ -169,40 +190,52 @@ This component, provide a drag and drop are to upload files to alfresco.
 Example of an App that declares upload drag and drop component :
 
 ```ts
-import { Component, OnInit } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
-import { HTTP_PROVIDERS } from '@angular/http';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
+import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
-    ALFRESCO_CORE_PROVIDERS,
+import { UploadModule } from 'ng2-alfresco-upload';
-    AlfrescoSettingsService
-} from 'ng2-alfresco-core';
-import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload';
 
 @Component({
-    selector: 'my-app',
+    selector: 'alfresco-app-demo',
     template: `<alfresco-upload-drag-area (onSuccess)="customMethod($event)" >
                      <div style="width: 200px; height: 100px; border: 1px solid #888888">
                          DRAG HERE
                      </div>
                </alfresco-upload-drag-area>
-               <file-uploading-dialog></file-uploading-dialog>`,
+               <file-uploading-dialog></file-uploading-dialog>`
-    directives: [ALFRESCO_ULPOAD_COMPONENTS]
 })
 export class MyDemoApp {
-    constructor(alfrescoSettingsService: AlfrescoSettingsService) {
+
-        alfrescoSettingsService.host = 'http://myalfrescoip';
+    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+        settingsService.ecmHost = 'http://localhost:8080';
+
+        this.authService.login('admin', 'admin').subscribe(
+            ticket => {
+                console.log(ticket);
+            },
+            error => {
+                console.log(error);
+            });
     }
 
-    public customMethod(event: Object): void {
+    public onSuccess(event: Object): void {
         console.log('File uploaded');
     }
 }
 
-bootstrap(MyDemoApp, [
+@NgModule({
-    HTTP_PROVIDERS,
+    imports: [
-    ALFRESCO_CORE_PROVIDERS,
+        BrowserModule,
-    UploadService
+        CoreModule.forRoot(),
-]);
+        UploadModule.forRoot()
+    ],
+    declarations: [ MyDemoApp ],
+    bootstrap:    [ MyDemoApp ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
 
 ```
 
@@ -232,6 +265,7 @@ with upload button or drag & drop area components. This component should
 ```
 
 ## Build from sources
+
 Alternatively you can build component from sources with the following commands:
 
 
@@ -240,10 +274,10 @@ npm install
 npm run build
 ```
 
-##Build the files and keep watching for changes
+### Build the files and keep watching for changes
 
 ```sh
-npm run build:w
+$ npm run build:w
 ```
 
 ## Running unit tests
@@ -252,7 +286,7 @@ npm run build:w
 npm test
 ```
 
-## Running unit tests in browser
+### Running unit tests in browser
 
 ```sh
 npm test-browser
@@ -261,7 +295,7 @@ npm test-browser
 This task rebuilds all the code, runs tslint, license checks and other quality check tools
 before performing unit testing.
 
-## Code coverage
+### Code coverage
 
 ```sh
 npm run coverage
@@ -276,3 +310,7 @@ cd demo
 npm install
 npm start
 ```
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-upload/demo/package.json

@@ -45,28 +45,6 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0"
-    "@types/node": "^6.0.42", ,
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "ng2-translate": "2.5.0",
-    "material-design-icons": "2.2.3",
-    "material-design-lite": "1.2.1",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-alfresco-core": "^0.3.0",
     "ng2-alfresco-upload": "^0.3.0"
   },
   "devDependencies": {

ng2-components/ng2-alfresco-upload/demo/src/main.ts

@@ -69,7 +69,6 @@ import { UploadModule } from 'ng2-alfresco-upload';
                     </label>
                 </p>
                 
-                
                 <p style="width:250px;margin: 20px;">
                     <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
                         <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
@@ -106,7 +105,7 @@ export class MyDemoApp implements OnInit {
 
     authenticated: boolean;
 
-    public ecmHost: string = 'http://devproducts-platform.alfresco.me';
+    public ecmHost: string = 'http://localhost:8080';
 
     multipleFileUpload: boolean = false;
     folderUpload: boolean = false;
@@ -154,7 +153,6 @@ export class MyDemoApp implements OnInit {
             });
     }
 
-
     toggleMultipleFileUpload() {
         this.multipleFileUpload = !this.multipleFileUpload;
         return this.multipleFileUpload;

ng2-components/ng2-alfresco-upload/package.json

@@ -53,24 +53,7 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
+    "ng2-alfresco-core": "0.3.2"
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "alfresco-js-api": "^0.3.0",
-    "core-js": "^2.4.1",
-    "ng2-alfresco-core": "0.3.2",
-    "ng2-translate": "2.5.0",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.32",