upload porting first step

ng2-components/ng2-alfresco-upload/demo/index.html

@@ -20,7 +20,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <!-- Additional Alfresco libraries -->
-    <script src="node_modules/alfresco-js-api/bundle.js"></script>
+    <script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
 
     <script src="systemjs.config.js"></script>
     <script>

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

@@ -109,6 +109,7 @@ export class MyDemoApp implements OnInit {
         this.authService.login('admin', 'admin').subscribe(
             token => {
                 console.log(token);
+                this.token = token;
                 this.authenticated = true;
             },
             error => {

ng2-components/ng2-alfresco-upload/karma.conf.js

@@ -19,6 +19,7 @@ module.exports = function (config) {
       {pattern: 'node_modules/material-design-lite/material.min.js', included: true, watched: false},
       {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
       {pattern: 'node_modules/ng2-translate/**/*.js', included: false, served: true, watched: false},
+      {pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', included: true, watched: false},
 
       {pattern: 'karma-test-shim.js', included: true, watched: true},
 
@@ -73,7 +74,7 @@ module.exports = function (config) {
 
     // Coverage reporter generates the coverage
     reporters: ['mocha', 'coverage', 'coveralls', 'kjhtml'],
-    
+
     // Source files that you wanna generate coverage for.
     // Do not include tests or libraries (these files will be instrumented by Istanbul)
     preprocessors: {

ng2-components/ng2-alfresco-upload/src/assets/upload.service.mock.ts

@@ -25,8 +25,7 @@ export class UploadServiceMock extends UploadService {
     filesUpload$: Observable<any>;
     totalCompleted$: Observable<number>;
 
-    constructor(settings: AlfrescoSettingsService,
-                authService: AlfrescoAuthenticationService) {
+    constructor(settings: AlfrescoSettingsService, authService: AlfrescoAuthenticationService) {
         super(settings, authService);
     }
 

ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts

@@ -82,7 +82,6 @@ export class UploadButtonComponent {
     constructor(public el: ElementRef,
                 private _uploaderService: UploadService,
                 translate: AlfrescoTranslationService) {
-        console.log('UploadComponent constructor', el);
 
         let formFields = this.createFormFields();
         this._uploaderService.setOptions(formFields);

ng2-components/ng2-alfresco-upload/src/services/upload.service.spec.ts

@@ -31,8 +31,7 @@ let errorFn = jasmine.createSpy('error');
 
 class MockUploadService extends UploadService {
 
-    constructor(settings: AlfrescoSettingsService,
-                authService: AlfrescoAuthenticationService) {
+    constructor(settings: AlfrescoSettingsService, authService: AlfrescoAuthenticationService) {
         super(settings, authService);
     }
 

ng2-components/ng2-alfresco-upload/src/services/upload.service.ts

@@ -20,7 +20,7 @@ import { EventEmitter, Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
-import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AlfrescoSettingsService, AlfrescoAuthenticationService} from 'ng2-alfresco-core';
 import { FileModel } from '../models/file.model';
 
 declare let AlfrescoApi: any;
@@ -35,8 +35,6 @@ declare let AlfrescoApi: any;
 export class UploadService {
     private _url: string = '/alfresco/api/-default-/public/alfresco/versions/1/nodes/-root-/children';
 
-    private _method: string = 'POST';
-    private _fieldName: string = 'filedata';
     private _formFields: Object = {};
 
     private _queue: FileModel[] = [];
@@ -50,12 +48,10 @@ export class UploadService {
 
     public totalCompleted: number = 0;
 
-    constructor(private settings: AlfrescoSettingsService,
-                private authService: AlfrescoAuthenticationService) {
-        console.log('UploadService constructor');
+    constructor(private settings: AlfrescoSettingsService, private authService: AlfrescoAuthenticationService) {
         this.filesUpload$ = new Observable<FileModel[]>(observer =>  this._filesUploadObserver = observer).share();
         this.totalCompleted$ = new Observable<number>(observer =>  this._totalCompletedObserver = observer).share();
-        this._alfrescoClient = this.getAlfrescoClient();
+        this._alfrescoClient = this.authService.alfrescoApi;
     }
 
     /**
@@ -93,14 +89,6 @@ export class UploadService {
         return this._formFields;
     }
 
-    /**
-     * Get the alfresco client
-     * @returns {AlfrescoApi.ApiClient}
-     */
-    private getAlfrescoClient() {
-        return AlfrescoApi.getClientWithTicket(this.settings.getApiBaseUrl(), this.authService.getToken());
-    }
-
     /**
      * Add files to the uploading queue to be uploaded.
      *
@@ -133,87 +121,35 @@ export class UploadService {
         });
         filesToUpload.forEach((uploadingFileModel) => {
             uploadingFileModel.setUploading();
-            this.uploadFile(uploadingFileModel, directory, elementEmit);
-        });
-    }
+            this.authService.alfrescoApi.
+            upload.uploadFile(uploadingFileModel.file, directory)
+                .on('progress', (progress: any) => {
+                    uploadingFileModel.setProgres(progress);
+                })
+                .on('abort', () => {
+                    uploadingFileModel.setAbort();
+                })
+                .on('error', () => {
+                    uploadingFileModel.setError();
+                })
+                .on('success', (data: any) => {
+                    elementEmit.emit({
+                        value: 'File uploaded'
+                    });
+                    uploadingFileModel.onFinished(
+                        data.status,
+                        data.statusText,
+                        data.response
+                    );
 
-    /**
-     * Create an XMLHttpRequest and return it
-     * @returns {XMLHttpRequest}
-     */
-    createXMLHttpRequestInstance(uploadingFileModel: any, elementEmit: EventEmitter<any>) {
-        let xmlHttpRequest = new XMLHttpRequest();
-        xmlHttpRequest.upload.onprogress = (e) => {
-            if (e.lengthComputable) {
-                let percent = Math.round(e.loaded / e.total * 100);
-                uploadingFileModel.setProgres({
-                    total: e.total,
-                    loaded: e.loaded,
-                    percent: percent
-                });
-                if (this._filesUploadObserver) {
                     this._filesUploadObserver.next(this._queue);
-                }
-            }
-        };
-
-        xmlHttpRequest.upload.onabort = (e) => {
-            uploadingFileModel.setAbort();
-        };
-
-        xmlHttpRequest.upload.onerror = (e) => {
-            uploadingFileModel.setError();
-        };
-
-        xmlHttpRequest.onreadystatechange = () => {
-            if (xmlHttpRequest.readyState === XMLHttpRequest.DONE) {
-                elementEmit.emit({
-                    value: 'File uploaded'
-                });
-                uploadingFileModel.onFinished(
-                    xmlHttpRequest.status,
-                    xmlHttpRequest.statusText,
-                    xmlHttpRequest.response
-                );
-                this._filesUploadObserver.next(this._queue);
-                if (!uploadingFileModel.abort && !uploadingFileModel.error) {
-                    if (this._totalCompletedObserver) {
-                        this._totalCompletedObserver.next(++this.totalCompleted);
+                    if (!uploadingFileModel.abort && !uploadingFileModel.error) {
+                        if (this._totalCompletedObserver) {
+                            this._totalCompletedObserver.next(++this.totalCompleted);
+                        }
                     }
-                }
-            }
-        };
-        return xmlHttpRequest;
-    }
-
-    /**
-     * Upload a file into the directory folder, and enrich it with the xhr.
-     *
-     * @param {FileModel} - files to be uploaded.
-     *
-     */
-    uploadFile(uploadingFileModel: FileModel, directory: string, elementEmit: EventEmitter<any>): void {
-        // Configure HTTP basic authorization: basicAuth
-        let basicAuth = this._alfrescoClient.authentications['basicAuth'];
-
-        let form = new FormData();
-        form.append(this._fieldName, uploadingFileModel.file, uploadingFileModel.name);
-        Object.keys(this._formFields).forEach((key: any) => {
-           form.append(key, this._formFields[key]);
+                });
         });
-
-        form.append('relativePath', directory);
-
-        let xmlHttpRequest = this.createXMLHttpRequestInstance(uploadingFileModel, elementEmit);
-        uploadingFileModel._xmlHttpRequest = xmlHttpRequest;
-
-        xmlHttpRequest.open(this._method, this.getHost() + this.getUrl(), true);
-        let authToken = btoa(basicAuth.username + ':' + basicAuth.password);
-        if (authToken) {
-            xmlHttpRequest.setRequestHeader('Authorization', `${basicAuth.type} ${authToken}`);
-        }
-
-        xmlHttpRequest.send(form);
     }
 
     /**