[ADF-1771] Upload widget clears out filename on cancel but uploads file (#2526)

* after uploaded a file should show the list of the files

* fix delete file from input

* add test delete file uploader

adf-rules/adfFileNameRule.js

@@ -20,7 +20,7 @@ Rule.FAILURE_STRING = 'The name of the File should not start with ADF Alfresco o
 exports.Rule = Rule;
 class AdfFileName extends Lint.RuleWalker {
     visitSourceFile(node) {
-        var whiteList = ['activiti-content.component.ts', 'activiti-alfresco.service.ts', 'activiti-content-service.ts',
+        var whiteList = ['activiti-content.component.ts', 'activiti-alfresco.service.ts',
             'alfresco-api.service.ts', 'alfresco-settings.service.ts', 'alfresco-content.service.ts',
             'activiti-content.component.spec.ts', 'activiti-alfresco.service.spec.ts', 'activiti-content-service.spec.ts',
             'alfresco-api.service.spec.ts', 'alfresco-settings.service.spec.ts', 'alfresco-content.service.spec.ts',

docs/README.md

@@ -194,6 +194,7 @@ for more information about installing and using the source code.
 
 - [Form rendering service](form-rendering.service.md)
 - [Form service](form.service.md)
+- [*Process content service](../ng2-components/ng2-activiti-form/src/services/process-content.service.ts)
 - [*Activiti alfresco service](../ng2-components/ng2-activiti-form/src/services/activiti-alfresco.service.ts)
 - [*Node service](../ng2-components/ng2-activiti-form/src/services/node.service.ts)
 - [*Widget visibility service](../ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts)

docs/form.service.md

@@ -73,7 +73,6 @@ class MyComponent {
 | getFormDefinitionByName | (name: string) | Observable\<any\> | Returns form definition by a given name. |
 | getStartFormInstance | (processId: string) | Observable\<any\> | Get start form instance for a given processId |
 | getStartFormDefinition | (processId: string) | Observable\<any\> | Get start form definition for a given process |
-| createTemporaryRawRelatedContent | (file: any) | Observable\<any\> | Save File |
 | getRestFieldValues | (taskId: string, field: string) | Observable\<any\> |  |
 | getRestFieldValuesByProcessId | (processDefinitionId: string, field: string) | Observable\<any\> |  |
 | getRestFieldValuesColumnByProcessId | (processDefinitionId: string, field: string, column?: string) | Observable\<any\> |  |

ng2-components/ng2-activiti-form/index.ts

@@ -29,11 +29,11 @@ import { ContentWidgetComponent } from './src/components/widgets/content/content
 import { MASK_DIRECTIVE, WIDGET_DIRECTIVES } from './src/components/widgets/index';
 import { WidgetComponent } from './src/components/widgets/widget.component';
 import { ActivitiAlfrescoContentService } from './src/services/activiti-alfresco.service';
-import { ActivitiContentService } from './src/services/activiti-content-service';
 import { EcmModelService } from './src/services/ecm-model.service';
 import { FormRenderingService } from './src/services/form-rendering.service';
 import { FormService } from './src/services/form.service';
 import { NodeService } from './src/services/node.service';
+import { ProcessContentService } from './src/services/process-content.service';
 import { WidgetVisibilityService } from './src/services/widget-visibility.service';
 
 export * from './src/components/form.component';
@@ -41,7 +41,6 @@ export * from './src/components/form-list.component';
 export * from './src/components/widgets/content/content.widget';
 export * from './src/components/start-form.component';
 export * from './src/services/form.service';
-export * from './src/services/activiti-content-service';
 export * from './src/components/widgets/index';
 export * from './src/services/ecm-model.service';
 export * from './src/services/node.service';
@@ -57,14 +56,15 @@ export { FormComponent as ActivitiForm } from './src/components/form.component';
 export { ContentWidgetComponent as ActivitiContent } from './src/components/widgets/content/content.widget';
 export { StartFormComponent as ActivitiStartForm } from './src/components/start-form.component';
 export { DynamicTableRow } from './src/components/widgets/dynamic-table/dynamic-table-row.model';
+export { ProcessContentService as ActivitiContentService } from './src/services/process-content.service';
 
 export const ACTIVITI_FORM_DIRECTIVES: any[] = [
+    ContentWidgetComponent,
+    FormFieldComponent,
     FormComponent,
     FormListComponent,
-    ContentWidgetComponent,
     StartFormComponent,
     StartFormCustomButtonDirective,
-    FormFieldComponent,
     ...WIDGET_DIRECTIVES
 ];
 
@@ -75,13 +75,13 @@ export const DEPRECATED_FORM_DIRECTIVES: any[] = [
 ];
 
 export const ACTIVITI_FORM_PROVIDERS: any[] = [
-    FormService,
-    ActivitiContentService,
-    EcmModelService,
-    NodeService,
-    WidgetVisibilityService,
     ActivitiAlfrescoContentService,
-    FormRenderingService
+    EcmModelService,
+    FormRenderingService,
+    FormService,
+    NodeService,
+    ProcessContentService,
+    WidgetVisibilityService
 ];
 
 @NgModule({

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

@@ -24,6 +24,7 @@ import { Observable } from 'rxjs/Rx';
 
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
+import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../index';
 import { ContentWidgetComponent } from './content.widget';
 
@@ -37,6 +38,7 @@ describe('ContentWidgetComponent', () => {
     let element: HTMLElement;
 
     let serviceForm: FormService;
+    let processContentService: ProcessContentService;
     let serviceContent: ContentService;
 
     function createFakeImageBlob() {
@@ -74,12 +76,14 @@ describe('ContentWidgetComponent', () => {
             providers: [
                 FormService,
                 EcmModelService,
-                ContentService
+                ContentService,
+                ProcessContentService
             ]
         }).compileComponents();
 
         serviceForm = TestBed.get(FormService);
         serviceContent = TestBed.get(ContentService);
+        processContentService = TestBed.get(ProcessContentService);
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
@@ -116,7 +120,7 @@ describe('ContentWidgetComponent', () => {
 
         it('should load the thumbnail preview of the png image', (done) => {
             let blob = createFakeImageBlob();
-            spyOn(serviceForm, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
 
             component.thumbnailLoaded.subscribe((res) => {
                 fixture.detectChanges();
@@ -159,7 +163,7 @@ describe('ContentWidgetComponent', () => {
 
         it('should load the thumbnail preview of a pdf', (done) => {
             let blob = createFakePdfBlob();
-            spyOn(serviceForm, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob));
 
             component.thumbnailLoaded.subscribe((res) => {
                 fixture.detectChanges();
@@ -241,7 +245,7 @@ describe('ContentWidgetComponent', () => {
 
         it('should open the viewer when the view button is clicked', (done) => {
             let blob = createFakePdfBlob();
-            spyOn(serviceForm, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
 
             component.content = new ContentLinkModel({
                 id: 4004,
@@ -274,7 +278,7 @@ describe('ContentWidgetComponent', () => {
 
         it('should download the pdf when the download button is clicked', () => {
             let blob = createFakePdfBlob();
-            spyOn(serviceForm, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
             spyOn(serviceContent, 'downloadBlob').and.callThrough();
 
             component.content = new ContentLinkModel({

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

@@ -18,6 +18,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ContentService, LogService } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
+import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
 import { FormService } from './../../../services/form.service';
 
@@ -51,7 +52,8 @@ export class ContentWidgetComponent implements OnChanges {
 
     constructor(protected formService: FormService,
                 private logService: LogService,
-                private contentService: ContentService) {
+                private contentService: ContentService,
+                private processContentService: ProcessContentService) {
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -62,7 +64,7 @@ export class ContentWidgetComponent implements OnChanges {
     }
 
     loadContent(id: number) {
-        this.formService
+        this.processContentService
             .getFileContent(id)
             .subscribe(
                 (response: ContentLinkModel) => {
@@ -81,9 +83,9 @@ export class ContentWidgetComponent implements OnChanges {
             let observable: Observable<any>;
 
             if (this.content.isTypeImage()) {
-                observable = this.formService.getFileRawContent(content.id);
+                observable = this.processContentService.getFileRawContent(content.id);
             } else {
-                observable = this.formService.getContentThumbnailUrl(content.id);
+                observable = this.processContentService.getContentThumbnailUrl(content.id);
             }
 
             if (observable) {
@@ -102,7 +104,7 @@ export class ContentWidgetComponent implements OnChanges {
     }
 
     openViewer(content: ContentLinkModel): void {
-        this.formService.getFileRawContent(content.id).subscribe(
+        this.processContentService.getFileRawContent(content.id).subscribe(
             (blob: Blob) => {
                 content.contentBlob = blob;
                 this.contentClick.emit(content);
@@ -119,7 +121,7 @@ export class ContentWidgetComponent implements OnChanges {
      * Invoke content download.
      */
     download(content: ContentLinkModel): void {
-        this.formService.getFileRawContent(content.id).subscribe(
+        this.processContentService.getFileRawContent(content.id).subscribe(
             (blob: Blob) => this.contentService.downloadBlob(blob, content.name),
             (error) => {
                 this.error.emit(error);

ng2-components/ng2-activiti-form/src/components/widgets/core/content-link.model.ts

@@ -17,10 +17,12 @@
 
  /* tslint:disable:component-selector  */
 
-export class ContentLinkModel {
+ import { RelatedContentRepresentation } from 'alfresco-js-api';
+
+ export class ContentLinkModel implements RelatedContentRepresentation {
 
     contentAvailable: boolean;
-    created: string;
+    created: Date;
     createdBy: any;
     id: number;
     link: boolean;

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

@@ -1,35 +1,40 @@
 <div class="adf-upload-widget {{field.className}}"
      [class.adf-invalid]="!field.isValid"
      [class.adf-readonly]="field.readOnly">
-    <label class="adf-label" [attr.for]="field.id" >{{field.name}}<span *ngIf="isRequired()">*</span></label>
+    <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
     <div class="adf-upload-widget-container">
         <div>
             <mat-list *ngIf="hasFile">
                 <mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
                     <img mat-list-icon class="adf-upload-widget__icon"
-                            [id]="'file-'+file.id+'-icon'"
+                         [id]="'file-'+file.id+'-icon'"
-                            [src]="getIcon(file.mimeType)"
+                         [src]="getIcon(file.mimeType)"
-                            [alt]="mimeTypeIcon"
+                         [alt]="mimeTypeIcon"
-                            (click)="fileClicked(file)"
+                         (click)="fileClicked(file)"
-                            (keyup.enter)="fileClicked(file)"
+                         (keyup.enter)="fileClicked(file)"
-                            role="button"
+                         role="button"
-                            tabindex="0"/>
+                         tabindex="0"/>
-                    <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" class="adf-file">{{file.name}}</span>
+                    <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
-                    <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'" (click)="reset(file);" (keyup.enter)="reset(file);">
+                          role="button" tabindex="0" class="adf-file">{{file.name}}</span>
+                    <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
+                            (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
                         <mat-icon class="mat-24">highlight_off</mat-icon>
                     </button>
                 </mat-list-item>
             </mat-list>
         </div>
-        <input *ngIf="!hasFile"
+
-               #file
+        <div class="button-row" *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-               type="file"
+            <a mat-raised-button color="primary">
-               [multiple]="multipleOption"
+                {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon>file_upload</mat-icon>
-               [id]="field.id"
+                <input #uploadFiles
-               [disabled]="field.readOnly || readonly"
+                       [multiple]="multipleOption"
-               class="adf-file"
+                       type="file"
-               (change)="onFileChanged($event)">
+                       [id]="field.id"
+                       (change)="onFileChanged($event)"/>
+            </a>
+        </div>
     </div>
-    <error-widget [error]="field.validationSummary" ></error-widget>
+    <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

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

@@ -2,8 +2,19 @@
 
 .adf {
 
-    &-upload-widget-container{
+    &-upload-widget-container {
         margin-bottom: 15px;
+
+        input {
+            cursor: pointer;
+            height: 100%;
+            right: 0;
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            width: 300px;
+            z-index: 4;
+        }
     }
 
     &-upload-widget {
@@ -19,11 +30,6 @@
         cursor: pointer;
     }
 
-    &-adf-file {
-        float: left;
-        margin-top: 4px;
-    }
-
     &-upload-widget__reset {
         margin-top: -2px;
     }

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

@@ -21,6 +21,7 @@ import { By } from '@angular/platform-browser';
 import { CoreModule } from 'ng2-alfresco-core';
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
+import { ProcessContentService } from '../../../services/process-content.service';
 import { MaterialModule } from '../../material.module';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormModel } from '../core/form.model';
@@ -32,7 +33,7 @@ let fakePngAnswer = {
     'id': 1155,
     'name': 'a_png_file.png',
     'created': '2017-07-25T17:17:37.099Z',
-    'createdBy': { 'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin' },
+    'createdBy': {'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin'},
     'relatedContent': false,
     'contentAvailable': true,
     'link': false,
@@ -46,7 +47,7 @@ let fakeJpgAnswer = {
     'id': 1156,
     'name': 'a_jpg_file.jpg',
     'created': '2017-07-25T17:17:37.118Z',
-    'createdBy': { 'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin' },
+    'createdBy': {'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin'},
     'relatedContent': false,
     'contentAvailable': true,
     'link': false,
@@ -60,51 +61,8 @@ declare let jasmine: any;
 
 describe('UploadWidgetComponent', () => {
 
-    let widget: UploadWidgetComponent;
+    let filePngFake = new File(['fakePng'], 'file-fake.png', {type: 'image/png'});
-    let formService: FormService;
+    let filJpgFake = new File(['fakeJpg'], 'file-fake.jpg', {type: 'image/jpg'});
-    let filePngFake = new File(['fakePng'], 'file-fake.png', { type: 'image/png' });
-    let filJpgFake = new File(['fakeJpg'], 'file-fake.jpg', { type: 'image/jpg' });
-
-    beforeEach(() => {
-        formService = new FormService(null, null, null);
-        widget = new UploadWidgetComponent(formService, null, null);
-    });
-
-    it('should setup with field data', () => {
-        const fileName = 'hello world';
-        const encodedFileName = encodeURI(fileName);
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.UPLOAD,
-            value: [
-                { name: encodedFileName }
-            ]
-        });
-
-        widget.ngOnInit();
-        expect(widget.hasFile).toBeTruthy();
-    });
-
-    it('should require form field to setup', () => {
-        widget.field = null;
-        widget.ngOnInit();
-
-        expect(widget.hasFile).toBeFalsy();
-    });
-
-    it('should reset field value', () => {
-        widget.field = new FormFieldModel(new FormModel(), {
-            type: FormFieldTypes.UPLOAD,
-            value: [
-                { name: 'filename' }
-            ]
-        });
-
-        widget.reset(widget.field.value[0]);
-        expect(widget.field.value).toBeNull();
-        expect(widget.field.json.value).toBeNull();
-        expect(widget.hasFile).toBeFalsy();
-    });
 
     describe('when template is ready', () => {
         let uploadWidgetComponent: UploadWidgetComponent;
@@ -118,7 +76,7 @@ describe('UploadWidgetComponent', () => {
             TestBed.configureTestingModule({
                 imports: [CoreModule, MaterialModule],
                 declarations: [UploadWidgetComponent, ErrorWidgetComponent],
-                providers: [FormService, EcmModelService]
+                providers: [FormService, EcmModelService, ProcessContentService]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(UploadWidgetComponent);
                 uploadWidgetComponent = fixture.componentInstance;
@@ -127,14 +85,55 @@ describe('UploadWidgetComponent', () => {
             });
         }));
 
+        beforeEach(() => {
+            jasmine.Ajax.install();
+
+        });
+
         afterEach(() => {
             fixture.destroy();
             TestBed.resetTestingModule();
             jasmine.Ajax.uninstall();
         });
 
+        it('should setup with field data', () => {
+            const fileName = 'hello world';
+            const encodedFileName = encodeURI(fileName);
+
+            uploadWidgetComponent.field = new FormFieldModel(null, {
+                type: FormFieldTypes.UPLOAD,
+                value: [
+                    {name: encodedFileName}
+                ]
+            });
+
+            uploadWidgetComponent.ngOnInit();
+            expect(uploadWidgetComponent.hasFile).toBeTruthy();
+        });
+
+        it('should require form field to setup', () => {
+            uploadWidgetComponent.field = null;
+            uploadWidgetComponent.ngOnInit();
+
+            expect(uploadWidgetComponent.hasFile).toBeFalsy();
+        });
+
+        it('should reset field value', () => {
+            uploadWidgetComponent.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                value: [
+                    {name: 'filename'}
+                ]
+            });
+
+            uploadWidgetComponent.removeFile(uploadWidgetComponent.field.value[0]);
+            expect(uploadWidgetComponent.field.value.length).toBe(0);
+            expect(uploadWidgetComponent.field.json.value.length).toBe(0);
+            expect(uploadWidgetComponent.hasFile).toBeFalsy();
+        });
+
         beforeEach(() => {
-            uploadWidgetComponent.field = new FormFieldModel(new FormModel({ taskId: 'fake-upload-id' }), {
+            uploadWidgetComponent.field = new FormFieldModel(new FormModel({taskId: 'fake-upload-id'}), {
                 id: 'upload-id',
                 name: 'upload-name',
                 value: '',
@@ -142,19 +141,16 @@ describe('UploadWidgetComponent', () => {
                 readOnly: false
             });
             formServiceInstance = TestBed.get(FormService);
-            jasmine.Ajax.install();
         });
 
-        it('should be disabled on readonly forms', async(() => {
+        it('should be not present in readonly forms', async(() => {
             uploadWidgetComponent.field.form.readOnly = true;
             fixture.detectChanges();
             inputElement = <HTMLInputElement> element.querySelector('#upload-id');
 
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(inputElement).toBeDefined();
+                expect(inputElement).toBeNull();
-                expect(inputElement).not.toBeNull();
-                expect(inputElement.disabled).toBeTruthy();
             });
         }));
 
@@ -184,11 +180,58 @@ describe('UploadWidgetComponent', () => {
             });
         }));
 
+        it('should show the list file after upload a new content', async(() => {
+            uploadWidgetComponent.field.params.multiple = false;
+            fixture.detectChanges();
+            let inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
+            inputDebugElement.triggerEventHandler('change', {target: {files: [filJpgFake]}});
+
+            jasmine.Ajax.requests.at(0).respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeJpgAnswer
+            });
+
+            let filesList = fixture.debugElement.query(By.css('#file-1156'));
+            expect(filesList).toBeDefined();
+
+        }));
+
+        it('should update the form after deleted a file', async(() => {
+            uploadWidgetComponent.field.params.multiple = true;
+
+            spyOn(uploadWidgetComponent.field, 'updateForm');
+            fixture.detectChanges();
+            let inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
+            inputDebugElement.triggerEventHandler('change', {target: {files: [filePngFake, filJpgFake]}});
+
+            jasmine.Ajax.requests.at(0).respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakePngAnswer
+            });
+
+            jasmine.Ajax.requests.at(1).respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeJpgAnswer
+            });
+
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                let deleteButton = <HTMLInputElement> element.querySelector('#file-1155-remove');
+                deleteButton.click();
+
+                expect(uploadWidgetComponent.field.updateForm).toHaveBeenCalled();
+            });
+
+        }));
+
         it('should set has field value all the files uploaded', async(() => {
             uploadWidgetComponent.field.params.multiple = true;
             fixture.detectChanges();
             let inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
-            inputDebugElement.triggerEventHandler('change', { target: { files: [filePngFake, filJpgFake] } });
+            inputDebugElement.triggerEventHandler('change', {target: {files: [filePngFake, filJpgFake]}});
 
             jasmine.Ajax.requests.at(0).respondWith({
                 status: 200,

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

@@ -17,10 +17,11 @@
 
 /* tslint:disable:component-selector  */
 
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { LogService, ThumbnailService } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 import { FormService } from '../../../services/form.service';
+import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
 import { baseHost, WidgetComponent } from './../widget.component';
 
@@ -38,9 +39,13 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
     multipleOption: string = '';
     mimeTypeIcon: string;
 
+    @ViewChild('uploadFiles')
+    fileInput: ElementRef;
+
     constructor(public formService: FormService,
                 private logService: LogService,
-                private thumbnailService: ThumbnailService) {
+                private thumbnailService: ThumbnailService,
+                public processContentService: ProcessContentService) {
         super(formService);
     }
 
@@ -53,21 +58,22 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
         this.getMultipleFileParam();
     }
 
-    reset(file: any) {
+    removeFile(file: any) {
         if (this.field) {
-            this.removeElementFromList(this.field.value, file);
+            this.removeElementFromList(file);
-            this.removeElementFromList(this.field.json.value, file);
-            this.hasFile = this.field.value.length > 0;
-            this.resetFormValueWithNoFiles();
         }
     }
 
     onFileChanged(event: any) {
         let files = event.target.files;
         let filesSaved = [];
+
+        if (this.field.json.value) {
+            filesSaved = [...this.field.json.value];
+        }
+
         if (files && files.length > 0) {
-            Observable.from(files).
+            Observable.from(files).flatMap(file => this.uploadRawContent(file)).subscribe((res) => {
-                flatMap(file => this.uploadRawContent(file)).subscribe((res) => {
                     filesSaved.push(res);
                 },
                 (error) => {
@@ -77,11 +83,13 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
                     this.field.value = filesSaved;
                     this.field.json.value = filesSaved;
                 });
+
+            this.hasFile = true;
         }
     }
 
     private uploadRawContent(file): Observable<any> {
-        return this.formService.createTemporaryRawRelatedContent(file)
+        return this.processContentService.createTemporaryRawRelatedContent(file)
             .map((response: any) => {
                 this.logService.info(response);
                 return response;
@@ -96,17 +104,24 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
         }
     }
 
-    private removeElementFromList(list, element) {
+    private removeElementFromList(file) {
-        let index = list.indexOf(element);
+        let index = this.field.value.indexOf(file);
+
         if (index !== -1) {
-            list.splice(index, 1);
+            this.field.value.splice(index, 1);
+            this.field.json.value = this.field.value;
+            this.field.updateForm();
         }
+
+        this.hasFile = this.field.value.length > 0;
+
+        this.resetFormValueWithNoFiles();
     }
 
     private resetFormValueWithNoFiles() {
         if (this.field.value.length === 0) {
-            this.field.value = null;
+            this.field.value = [];
-            this.field.json.value = null;
+            this.field.json.value = [];
         }
     }
 
@@ -115,7 +130,7 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
     }
 
     fileClicked(file: ContentLinkModel): void {
-        this.formService.getFileRawContent(file.id).subscribe(
+        this.processContentService.getFileRawContent(file.id).subscribe(
             (blob: Blob) => {
                 file.contentBlob = blob;
                 this.formService.formContentClicked.next(file);
@@ -125,5 +140,4 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
             }
         );
     }
-
 }

ng2-components/ng2-activiti-form/src/i18n/en.json

@@ -7,6 +7,7 @@
       "IMAGE_NOT_AVAILABLE": "Preview not available"
     },
     "FIELD": {
+        "UPLOAD": "UPLOAD",
         "REQUIRED" : "*Required",
         "VALIDATOR" : {
             "INVALID_NUMBER" : "Incorrect number format",

ng2-components/ng2-activiti-form/src/i18n/it.json

@@ -1,23 +1,23 @@
 {
-  "FORM": {
+    "FORM": {
-    "START_FORM": {
+        "START_FORM": {
-      "TITLE": "Modulo di inizio"
+            "TITLE": "Modulo di inizio"
-    },
+        },
-    "PREVIEW": {
+        "PREVIEW": {
-      "IMAGE_NOT_AVAILABLE": "Anteprima immagine non disponibile."
+            "IMAGE_NOT_AVAILABLE": "Anteprima immagine non disponibile."
-    },
+        },
-    "FIELD": {
+        "FIELD": {
-        "REQUIRED" : "*Obbligatorio",
+            "UPLOAD": "UPLOAD",
-        "VALIDATOR" : {
+            "REQUIRED": "*Obbligatorio",
-            "INVALID_NUMBER" : "Non un numero",
+            "VALIDATOR": {
-            "INVALID_DATE" : "Non una data",
+                "INVALID_NUMBER": "Non un numero",
-            "INVALID_VALUE": "Valore non valido",
+                "INVALID_DATE": "Non una data",
-            "NOT_GREATER_THAN" : "Non dovrebbe essere piu grande di {{ maxValue }}",
+                "INVALID_VALUE": "Valore non valido",
-            "NOT_LESS_THAN" : "Non dovrebbe essere meno di {{ minValue }}",
+                "NOT_GREATER_THAN": "Non dovrebbe essere piu grande di {{ maxValue }}",
-            "AT_LEAST_LONG" : "Dovrebbe essere almeno {{ minLength }} caratteri.",
+                "NOT_LESS_THAN": "Non dovrebbe essere meno di {{ minValue }}",
-            "NO_LONGER_THAN" : "Dovrebbe essere massimo {{ maxLength }} caratteri."
+                "AT_LEAST_LONG": "Dovrebbe essere almeno {{ minLength }} caratteri.",
+                "NO_LONGER_THAN": "Dovrebbe essere massimo {{ maxLength }} caratteri."
+            }
         }
     }
-    }
+}
-  }
-}

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

@@ -1,106 +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 { Injectable } from '@angular/core';
-import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
-import { Observable } from 'rxjs/Rx';
-
-@Injectable()
-export class ActivitiContentService {
-
-    static UNKNOWN_ERROR_MESSAGE: string = 'Unknown error';
-    static GENERIC_ERROR_MESSAGE: string = 'Server error';
-
-    constructor(private apiService: AlfrescoApiService,
-                private logService: LogService) {
-    }
-
-    getFileRawContent(contentId: number): Observable<any> {
-        let alfrescoApi = this.apiService.getInstance();
-        return Observable.fromPromise(alfrescoApi.activiti.contentApi.getRawContent(contentId))
-            .catch(err => this.handleError(err));
-    }
-
-    /**
-     * Return all the related content of the task
-     * @param taskId
-     * @returns {any}
-     */
-    getTaskRelatedContent(taskId: string): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.getRelatedContentForTask(taskId))
-            .catch(err => this.handleError(err));
-    }
-
-    /**
-     * Return all the related content of the process
-     * @param processId
-     * @returns {any}
-     */
-    getProcessRelatedContent(processId: string): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.getRelatedContentForProcessInstance(processId))
-            .catch(err => this.handleError(err));
-    }
-
-    /**
-     * Delete a content by Id
-     * @param contentId
-     * @returns {any}
-     */
-    deleteRelatedContent(contentId: number): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.deleteContent(contentId))
-            .catch(err => this.handleError(err));
-    }
-
-    /**
-     * Return all the related content of the process instance
-     * @param processInstanceId
-     * @returns {any}
-     */
-    createProcessRelatedContent(processInstanceId: string, content: any, opts?: any): Observable<any> {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createRelatedContentOnProcessInstance(processInstanceId, content, opts))
-            .catch(err => this.handleError(err));
-    }
-
-    toJson(res: any) {
-        if (res) {
-            return res || {};
-        }
-        return {};
-    }
-
-    toJsonArray(res: any) {
-        if (res) {
-            return res.data || [];
-        }
-        return [];
-    }
-
-    handleError(error: any): Observable<any> {
-        let errMsg = ActivitiContentService.UNKNOWN_ERROR_MESSAGE;
-        if (error) {
-            errMsg = (error.message) ? error.message :
-                error.status ? `${error.status} - ${error.statusText}` : ActivitiContentService.GENERIC_ERROR_MESSAGE;
-        }
-        this.logService.error(errMsg);
-        return Observable.throw(errMsg);
-    }
-
-    createTaskRelatedContent(taskId: string, file: any, opts?: any) {
-        return Observable.fromPromise(this.apiService.getInstance().activiti.contentApi.createRelatedContentOnTask(taskId, file, opts))
-            .catch(err => this.handleError(err));
-    }
-}

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

@@ -1,99 +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 { TestBed } from '@angular/core/testing';
-import { CoreModule } from 'ng2-alfresco-core';
-import { ActivitiContentService } from './activiti-content-service';
-
-declare let jasmine: any;
-
-describe('ActivitiContentService', () => {
-
-    let service: ActivitiContentService;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [
-                CoreModule
-            ],
-            providers: [
-                ActivitiContentService
-            ]
-        });
-        service = TestBed.get(ActivitiContentService);
-    });
-
-    beforeEach(() => {
-        jasmine.Ajax.install();
-    });
-
-    afterEach(() => {
-        jasmine.Ajax.uninstall();
-    });
-
-    it('Should fetch the attachements', (done) => {
-        service.getTaskRelatedContent('1234').subscribe((res) => {
-            expect(res.data).toBeDefined();
-            expect(res.data.length).toBe(2);
-            expect(res.data[0].name).toBe('fake.zip');
-            expect(res.data[0].mimeType).toBe('application/zip');
-            expect(res.data[0].relatedContent).toBeTruthy();
-            expect(res.data[1].name).toBe('fake.jpg');
-            expect(res.data[1].mimeType).toBe('image/jpeg');
-            expect(res.data[1].relatedContent).toBeTruthy();
-            done();
-        });
-
-        jasmine.Ajax.requests.mostRecent().respondWith({
-            'status': 200,
-            contentType: 'application/json',
-            responseText: JSON.stringify({
-                size: 2,
-                total: 2,
-                start: 0,
-                data: [
-                    {
-                        id: 8,
-                        name: 'fake.zip',
-                        created: 1494595697381,
-                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
-                        relatedContent: true,
-                        contentAvailable: true,
-                        link: false,
-                        mimeType: 'application/zip',
-                        simpleType: 'content',
-                        previewStatus: 'unsupported',
-                        thumbnailStatus: 'unsupported'
-                    },
-                    {
-                        id: 9,
-                        name: 'fake.jpg',
-                        created: 1494595655381,
-                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
-                        relatedContent: true,
-                        contentAvailable: true,
-                        link: false,
-                        mimeType: 'image/jpeg',
-                        simpleType: 'image',
-                        previewStatus: 'unsupported',
-                        thumbnailStatus: 'unsupported'
-                    }
-                ]
-            })
-        });
-    });
-});

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

@@ -18,7 +18,6 @@
 import { async, TestBed } from '@angular/core/testing';
 import { Response, ResponseOptions } from '@angular/http';
 import { AlfrescoApiService, CoreModule, LogService } from 'ng2-alfresco-core';
-import { Observable } from 'rxjs/Rx';
 import { FormDefinitionModel } from '../models/form-definition.model';
 import { formModelTabs } from './assets/form.service.mock';
 import { EcmModelService } from './ecm-model.service';
@@ -51,17 +50,6 @@ let fakePeopleResponse = {
     }, { 'id': 2004, 'firstName': 'Peo03', 'lastName': 'Ple03', 'email': 'people03' }]
 };
 
-function createFakeBlob() {
-    let data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
-
-    let bytes = new Uint8Array(data.length / 2);
-
-    for (let i = 0; i < data.length; i += 2) {
-        bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
-    }
-    return new Blob([bytes], { type: 'image/png' });
-}
-
 describe('Form service', () => {
 
     let service: FormService;
@@ -110,34 +98,6 @@ describe('Form service', () => {
 
         let simpleResponseBody = { id: 1, modelType: 'test' };
 
-        let fileContentPdfResponseBody = {
-            id: 999,
-            name: 'fake-name.pdf',
-            created: '2017-01-23T12:12:53.219+0000',
-            createdBy: { id: 2, firstName: 'fake-admin', lastName: 'fake-last', 'email': 'fake-admin' },
-            relatedContent: false,
-            contentAvailable: true,
-            link: false,
-            mimeType: 'application/pdf',
-            simpleType: 'pdf',
-            previewStatus: 'created',
-            thumbnailStatus: 'created'
-        };
-
-        let fileContentJpgResponseBody = {
-            id: 888,
-            name: 'fake-name.jpg',
-            created: '2017-01-23T12:12:53.219+0000',
-            createdBy: { id: 2, firstName: 'fake-admin', lastName: 'fake-last', 'email': 'fake-admin' },
-            relatedContent: false,
-            contentAvailable: true,
-            link: false,
-            mimeType: 'image/jpeg',
-            simpleType: 'image',
-            previewStatus: 'unsupported',
-            thumbnailStatus: 'unsupported'
-        };
-
         it('should fetch and parse process definitions', (done) => {
             service.getProcessDefinitions().subscribe(result => {
                 expect(jasmine.Ajax.requests.mostRecent().url.endsWith('/process-definitions')).toBeTruthy();
@@ -423,60 +383,6 @@ describe('Form service', () => {
             });
         });
 
-        it('should return the unsupported content when the file is an image', (done) => {
-            let contentId: number = 888;
-
-            service.getFileContent(contentId).subscribe(result => {
-                expect(result.id).toEqual(contentId);
-                expect(result.name).toEqual('fake-name.jpg');
-                expect(result.simpleType).toEqual('image');
-                expect(result.thumbnailStatus).toEqual('unsupported');
-                done();
-            });
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                'status': 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fileContentJpgResponseBody)
-            });
-        });
-
-        it('should return the supported content when the file is a pdf', (done) => {
-            let contentId: number = 999;
-
-            service.getFileContent(contentId).subscribe(result => {
-                expect(result.id).toEqual(contentId);
-                expect(result.name).toEqual('fake-name.pdf');
-                expect(result.simpleType).toEqual('pdf');
-                expect(result.thumbnailStatus).toEqual('created');
-                done();
-            });
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                'status': 200,
-                contentType: 'application/json',
-                responseText: JSON.stringify(fileContentPdfResponseBody)
-            });
-        });
-
-        it('should return the raw content URL', () => {
-            let contentId: number = 999;
-            let contentUrl = service.getFileRawContentUrl(contentId);
-            expect(contentUrl).toContain(`/api/enterprise/content/${contentId}/raw`);
-        });
-
-        it('should return a Blob as thumbnail', (done) => {
-            let contentId: number = 999;
-            let blob = createFakeBlob();
-            spyOn(service, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob));
-            service.getContentThumbnailUrl(contentId).subscribe(result => {
-                expect(result).toEqual(jasmine.any(Blob));
-                expect(result.size).toEqual(48);
-                expect(result.type).toEqual('image/png');
-                done();
-            });
-        });
-
         it('should return list of people', (done) => {
             spyOn(service, 'getUserProfileImageApi').and.returnValue('/app/rest/users/2002/picture');
             let fakeFilter: string = 'whatever';

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

@@ -55,10 +55,6 @@ export class FormService {
                 protected logService: LogService) {
     }
 
-    private get contentApi(): any {
-        return this.apiService.getInstance().activiti.contentApi;
-    }
-
     private get taskApi(): any {
         return this.apiService.getInstance().activiti.taskApi;
     }
@@ -330,31 +326,6 @@ export class FormService {
             .catch(err => this.handleError(err));
     }
 
-    /**
-     * Save File
-     * @param file file
-     * @returns {Observable<any>}
-     */
-    createTemporaryRawRelatedContent(file: any): Observable<any> {
-        return Observable.fromPromise(this.contentApi.createTemporaryRawRelatedContent(file)).catch(err => this.handleError(err));
-    }
-
-    getFileContent(contentId: number): Observable<any> {
-        return Observable.fromPromise(this.contentApi.getContent(contentId)).catch(err => this.handleError(err));
-    }
-
-    getFileRawContent(contentId: number): Observable<any> {
-        return Observable.fromPromise(this.contentApi.getRawContent(contentId)).catch(err => this.handleError(err));
-    }
-
-    getFileRawContentUrl(contentId: number): string {
-        return this.contentApi.getRawContentUrl(contentId);
-    }
-
-    getContentThumbnailUrl(contentId: number): Observable<any> {
-        return Observable.fromPromise(this.contentApi.getContentThumbnailUrl(contentId)).catch(err => this.handleError(err));
-    }
-
     getRestFieldValues(taskId: string, field: string): Observable<any> {
         return Observable.fromPromise(this.taskApi.getRestFieldValues(taskId, field)).catch(err => this.handleError(err));
     }

ng2-components/ng2-activiti-form/src/services/process-content.service.spec.ts

@@ -0,0 +1,194 @@
+/*!
+ * @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 { TestBed } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
+import { ProcessContentService } from './process-content.service';
+
+declare let jasmine: any;
+
+let fileContentPdfResponseBody = {
+    id: 999,
+    name: 'fake-name.pdf',
+    created: '2017-01-23T12:12:53.219+0000',
+    createdBy: { id: 2, firstName: 'fake-admin', lastName: 'fake-last', 'email': 'fake-admin' },
+    relatedContent: false,
+    contentAvailable: true,
+    link: false,
+    mimeType: 'application/pdf',
+    simpleType: 'pdf',
+    previewStatus: 'created',
+    thumbnailStatus: 'created'
+};
+
+let fileContentJpgResponseBody = {
+    id: 888,
+    name: 'fake-name.jpg',
+    created: '2017-01-23T12:12:53.219+0000',
+    createdBy: { id: 2, firstName: 'fake-admin', lastName: 'fake-last', 'email': 'fake-admin' },
+    relatedContent: false,
+    contentAvailable: true,
+    link: false,
+    mimeType: 'image/jpeg',
+    simpleType: 'image',
+    previewStatus: 'unsupported',
+    thumbnailStatus: 'unsupported'
+};
+
+function createFakeBlob() {
+    let data = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+    let bytes = new Uint8Array(data.length / 2);
+
+    for (let i = 0; i < data.length; i += 2) {
+        bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
+    }
+    return new Blob([bytes], { type: 'image/png' });
+}
+
+describe('ActivitiContentService', () => {
+
+    let service: ProcessContentService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule
+            ],
+            providers: [
+                ProcessContentService
+            ]
+        });
+        service = TestBed.get(ProcessContentService);
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+    });
+
+    afterEach(() => {
+        jasmine.Ajax.uninstall();
+    });
+
+    it('Should fetch the attachments', (done) => {
+        service.getTaskRelatedContent('1234').subscribe((res) => {
+            expect(res.data).toBeDefined();
+            expect(res.data.length).toBe(2);
+            expect(res.data[0].name).toBe('fake.zip');
+            expect(res.data[0].mimeType).toBe('application/zip');
+            expect(res.data[0].relatedContent).toBeTruthy();
+            expect(res.data[1].name).toBe('fake.jpg');
+            expect(res.data[1].mimeType).toBe('image/jpeg');
+            expect(res.data[1].relatedContent).toBeTruthy();
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify({
+                size: 2,
+                total: 2,
+                start: 0,
+                data: [
+                    {
+                        id: 8,
+                        name: 'fake.zip',
+                        created: 1494595697381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'application/zip',
+                        simpleType: 'content',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    },
+                    {
+                        id: 9,
+                        name: 'fake.jpg',
+                        created: 1494595655381,
+                        createdBy: {id: 2, firstName: 'user', lastName: 'user', email: 'user@user.com'},
+                        relatedContent: true,
+                        contentAvailable: true,
+                        link: false,
+                        mimeType: 'image/jpeg',
+                        simpleType: 'image',
+                        previewStatus: 'unsupported',
+                        thumbnailStatus: 'unsupported'
+                    }
+                ]
+            })
+        });
+    });
+
+    it('should return the unsupported content when the file is an image', (done) => {
+        let contentId: number = 888;
+
+        service.getFileContent(contentId).subscribe(result => {
+            expect(result.id).toEqual(contentId);
+            expect(result.name).toEqual('fake-name.jpg');
+            expect(result.simpleType).toEqual('image');
+            expect(result.thumbnailStatus).toEqual('unsupported');
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fileContentJpgResponseBody)
+        });
+    });
+
+    it('should return the supported content when the file is a pdf', (done) => {
+        let contentId: number = 999;
+
+        service.getFileContent(contentId).subscribe(result => {
+            expect(result.id).toEqual(contentId);
+            expect(result.name).toEqual('fake-name.pdf');
+            expect(result.simpleType).toEqual('pdf');
+            expect(result.thumbnailStatus).toEqual('created');
+            done();
+        });
+
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            'status': 200,
+            contentType: 'application/json',
+            responseText: JSON.stringify(fileContentPdfResponseBody)
+        });
+    });
+
+    it('should return the raw content URL', () => {
+        let contentId: number = 999;
+        let contentUrl = service.getFileRawContentUrl(contentId);
+        expect(contentUrl).toContain(`/api/enterprise/content/${contentId}/raw`);
+    });
+
+    it('should return a Blob as thumbnail', (done) => {
+        let contentId: number = 999;
+        let blob = createFakeBlob();
+        spyOn(service, 'getContentThumbnailUrl').and.returnValue(Observable.of(blob));
+        service.getContentThumbnailUrl(contentId).subscribe(result => {
+            expect(result).toEqual(jasmine.any(Blob));
+            expect(result.size).toEqual(48);
+            expect(result.type).toEqual('image/png');
+            done();
+        });
+    });
+
+});

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

@@ -0,0 +1,123 @@
+/*!
+ * @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.
+ */
+
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { RelatedContentRepresentation } from 'alfresco-js-api';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
+
+@Injectable()
+export class ProcessContentService {
+
+    static UNKNOWN_ERROR_MESSAGE: string = 'Unknown error';
+    static GENERIC_ERROR_MESSAGE: string = 'Server error';
+
+    constructor(private apiService: AlfrescoApiService,
+                private logService: LogService) {
+    }
+
+    private get contentApi(): any {
+        return this.apiService.getInstance().activiti.contentApi;
+    }
+
+    createTemporaryRawRelatedContent(file: any): Observable<RelatedContentRepresentation> {
+        return Observable.fromPromise(this.contentApi.createTemporaryRawRelatedContent(file)).catch(err => this.handleError(err));
+    }
+
+    getFileContent(contentId: number): Observable<RelatedContentRepresentation> {
+        return Observable.fromPromise(this.contentApi.getContent(contentId)).catch(err => this.handleError(err));
+    }
+
+    getFileRawContent(contentId: number): Observable<Blob> {
+        return Observable.fromPromise(this.contentApi.getRawContent(contentId)).catch(err => this.handleError(err));
+    }
+
+    getFileRawContentUrl(contentId: number): string {
+        return this.contentApi.getRawContentUrl(contentId);
+    }
+
+    getContentThumbnailUrl(contentId: number): Observable<any> {
+        return Observable.fromPromise(this.contentApi.getContentThumbnailUrl(contentId)).catch(err => this.handleError(err));
+    }
+
+    getTaskRelatedContent(taskId: string): Observable<any> {
+        return Observable.fromPromise(this.contentApi.getRelatedContentForTask(taskId))
+            .catch(err => this.handleError(err));
+    }
+
+    getProcessRelatedContent(processId: string): Observable<any> {
+        return Observable.fromPromise(this.contentApi.getRelatedContentForProcessInstance(processId))
+            .catch(err => this.handleError(err));
+    }
+
+    deleteRelatedContent(contentId: number): Observable<any> {
+        return Observable.fromPromise(this.contentApi.deleteContent(contentId))
+            .catch(err => this.handleError(err));
+    }
+
+    createProcessRelatedContent(processInstanceId: string, content: any, opts?: any): Observable<any> {
+        return Observable.fromPromise(this.contentApi.createRelatedContentOnProcessInstance(processInstanceId, content, opts))
+            .catch(err => this.handleError(err));
+    }
+
+    createTaskRelatedContent(taskId: string, file: any, opts?: any) {
+        return Observable.fromPromise(this.contentApi.createRelatedContentOnTask(taskId, file, opts))
+            .catch(err => this.handleError(err));
+    }
+
+    toJson(res: any) {
+        if (res) {
+            return res || {};
+        }
+        return {};
+    }
+
+    toJsonArray(res: any) {
+        if (res) {
+            return res.data || [];
+        }
+        return [];
+    }
+
+    handleError(error: any): Observable<any> {
+        let errMsg = ProcessContentService.UNKNOWN_ERROR_MESSAGE;
+        if (error) {
+            errMsg = (error.message) ? error.message :
+                error.status ? `${error.status} - ${error.statusText}` : ProcessContentService.GENERIC_ERROR_MESSAGE;
+        }
+        this.logService.error(errMsg);
+        return Observable.throw(errMsg);
+    }
+
+}