Merge pull request #1231 from Alfresco/dev-mromano-1215

#1215 use alfresco-js-api for upload file

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.css

@@ -41,3 +41,12 @@
 .upload-widget__label {
     color: rgba(0, 0, 0, .26);
 }
+
+.img-upload-widget {
+    width: 100px;
+    height: 100px;
+    padding: 2px;
+    border: 1px solid rgba(117, 117, 117, 0.57);
+    box-shadow: 1px 1px 2px #dddddd;
+    background-color: #ffffff;
+}

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.html

@@ -71,7 +71,12 @@
     </div>
     <div *ngSwitchCase="'upload'">
         <div class="upload-widget" *ngIf="field?.isVisible">
+            <div>
                 <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
+            </div>
+            <div>
+                <img *ngIf="hasFile" class="img-upload-widget" src="{{settingsService.bpmHost}}/activiti-app/app/rest/content/{{id}}/raw">
+            </div>
             <div>
                 <i *ngIf="hasFile" class="material-icons upload-widget__icon">attachment</i>
                 <span *ngIf="hasFile" class="upload-widget__file">{{value}}</span>

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts

@@ -26,17 +26,20 @@ import { FormFieldTypes } from '../core/form-field-types';
 import { FormModel } from '../core/form.model';
 import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 describe('DisplayValueWidget', () => {
 
     let widget: DisplayValueWidget;
     let formService: FormService;
     let visibilityService: WidgetVisibilityService;
+    let settingsService: AlfrescoSettingsService;
 
     beforeEach(() => {
+        settingsService = new AlfrescoSettingsService();
         formService = new FormService(null, null);
         visibilityService = new WidgetVisibilityService(null, null, null);
-        widget = new DisplayValueWidget(formService, visibilityService);
+        widget = new DisplayValueWidget(formService, visibilityService, settingsService);
     });
 
     it('should require field to setup default value', () => {
@@ -538,8 +541,7 @@ describe('DisplayValueWidget', () => {
             type: FormFieldTypes.DISPLAY_VALUE,
             value: value,
             params: {
-                field: {
+                field: {}
-                }
             }
         });
         widget.ngOnInit();

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts

@@ -22,6 +22,7 @@ import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
 import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 @Component({
     moduleId: module.id,
@@ -33,6 +34,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
 
     value: any;
     fieldType: string;
+    id: any;
 
     // hyperlink
     linkUrl: string;
@@ -47,7 +49,8 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
     hasFile: boolean = false;
 
     constructor(private formService: FormService,
-                private visibilityService: WidgetVisibilityService) {
+                private visibilityService: WidgetVisibilityService,
+                private settingsService: AlfrescoSettingsService) {
         super();
     }
 
@@ -81,6 +84,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit, After
                             let files = this.field.value || [];
                             if (files.length > 0) {
                                 this.value = decodeURI(files[0].name);
+                                this.id = files[0].id;
                                 this.hasFile = true;
                             } else {
                                 this.value = null;

ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.spec.ts

@@ -16,20 +16,18 @@
  */
 
 import { UploadWidget } from './upload.widget';
-import { AlfrescoSettingsService, AlfrescoAuthenticationService, AlfrescoApiService, StorageService } from 'ng2-alfresco-core';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormFieldTypes } from '../core/form-field-types';
+import { FormService } from '../../../services/form.service';
 
 describe('UploadWidget', () => {
 
     let widget: UploadWidget;
-    let settingsService: AlfrescoSettingsService;
+    let formService: FormService;
-    let authService: AlfrescoAuthenticationService;
 
     beforeEach(() => {
-        settingsService = new AlfrescoSettingsService();
+        formService = new FormService(null, null);
-        authService = new AlfrescoAuthenticationService(settingsService, new AlfrescoApiService(), new StorageService());
+        widget = new UploadWidget(formService);
-        widget = new UploadWidget(settingsService, authService);
     });
 
     it('should setup with field data', () => {

ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts

@@ -17,7 +17,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
-import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { FormService } from '../../../services/form.service';
 
 @Component({
     moduleId: module.id,
@@ -31,8 +31,7 @@ export class UploadWidget extends WidgetComponent implements OnInit {
     fileName: string;
     displayText: string;
 
-    constructor(private settingsService: AlfrescoSettingsService,
+    constructor(private formService: FormService) {
-                private authService: AlfrescoAuthenticationService) {
         super();
     }
 
@@ -64,35 +63,15 @@ export class UploadWidget extends WidgetComponent implements OnInit {
 
             let file = files[0];
 
-            this.hasFile = true;
+            this.formService.createTemporaryRawRelatedContent(file)
-            this.fileName = encodeURI(file.name);
+                .subscribe((response: any) => {
-            this.displayText = file.name;
+                    console.log(response);
-
+                    this.field.value = [response];
-            let formData: FormData = new FormData();
+                    this.field.json.value = [response];
-            formData.append('file', file, this.fileName);
+                }, (error: any) => {
-
+                    console.error(error);
-            let xhr: XMLHttpRequest = new XMLHttpRequest();
-
-            xhr.withCredentials = true;
-
-            xhr.onreadystatechange = () => {
-                if (xhr.readyState === 4) {
-                    if (xhr.status === 200) {
-                        let jsonFile = JSON.parse(xhr.response);
-                        console.log(jsonFile);
-                        this.field.value = [jsonFile];
-                        this.field.json.value = [jsonFile];
-                    } else {
-                        console.error(xhr.response);
                     window.alert('Error uploading file. See console output for more details.');
-                    }
+                });
-                }
-            };
-
-            let url = `${this.settingsService.bpmHost}/activiti-app/app/rest/content/raw`;
-            xhr.open('POST', url, true);
-            xhr.setRequestHeader('Authorization', this.authService.getTicketBpm());
-            xhr.send(formData);
         }
     }
 

ng2-components/ng2-activiti-form/src/services/form.service.ts

@@ -230,6 +230,15 @@ export class FormService {
             .catch(this.handleError);
     }
 
+    /**
+     * Save File
+     * @param file file
+     * @returns {Observable<any>}
+     */
+    createTemporaryRawRelatedContent(file: any): Observable<any> {
+        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createTemporaryRawRelatedContent(file));
+    }
+
     getRestFieldValues(taskId: string, field: string): Observable<any> {
         let alfrescoApi = this.apiService.getInstance();
         return Observable.fromPromise(alfrescoApi.activiti.taskApi.getRestFieldValues(taskId, field));