diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css
new file mode 100644
index 0000000000..59422a60f7
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.css
@@ -0,0 +1,19 @@
+.upload-attachment-container {
+ border: 1px solid rgb(224, 224, 224);
+ background: #fff;
+ text-align: left;
+ border-top: none;
+ padding: 10px;
+ text-align: center;
+}
+
+.drag-area {
+ border: 1px solid #eee;
+ padding: 100px 10px;
+ margin-bottom: 10px;
+}
+
+.upload-attachment-container button {
+ color: rgb(253, 145, 0);
+ opacity: 0.64;
+}
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html
new file mode 100644
index 0000000000..6638e1d2d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.html
@@ -0,0 +1,15 @@
+
+
+ Drop Files Here...
+
+
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.spec.ts
new file mode 100644
index 0000000000..91631267c8
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.spec.ts
@@ -0,0 +1,100 @@
+/*!
+ * @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 { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Rx';
+
+import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+
+import { ActivitiCreateProcessAttachmentComponent } from './activiti-create-process-attachment.component';
+import { TranslationMock } from './../assets/translation.service.mock';
+
+describe('Activiti Process Instance Create Attachment', () => {
+
+ let componentHandler: any;
+ let service: ActivitiContentService;
+ let component: ActivitiCreateProcessAttachmentComponent;
+ let fixture: ComponentFixture;
+ let createProcessRelatedContentSpy: jasmine.Spy;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ CoreModule.forRoot()
+ ],
+ declarations: [
+ ActivitiCreateProcessAttachmentComponent
+ ],
+ providers: [
+ { provide: AlfrescoTranslationService, useClass: TranslationMock },
+ ActivitiContentService
+ ]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+
+ fixture = TestBed.createComponent(ActivitiCreateProcessAttachmentComponent);
+ component = fixture.componentInstance;
+ service = fixture.debugElement.injector.get(ActivitiContentService);
+
+ createProcessRelatedContentSpy = spyOn(service, 'createProcessRelatedContent').and.returnValue(Observable.of({successCode: true}));
+
+ componentHandler = jasmine.createSpyObj('componentHandler', [
+ 'upgradeAllRegistered',
+ 'upgradeElement'
+ ]);
+ window['componentHandler'] = componentHandler;
+ });
+
+ it('should not call createProcessRelatedContent service when processInstanceId changed', () => {
+ let change = new SimpleChange(null, '123', true);
+ component.ngOnChanges({ 'processInstanceId': change });
+ expect(createProcessRelatedContentSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not call createProcessRelatedContent service when there is no file uploaded', () => {
+ let change = new SimpleChange(null, '123', true);
+ component.ngOnChanges({ 'processInstanceId': change });
+ let customEvent = {
+ detail: {
+ files: [
+ ]
+ }
+ };
+ component.onFileUpload(customEvent);
+ expect(createProcessRelatedContentSpy).not.toHaveBeenCalled();
+ });
+
+ it('should call createProcessRelatedContent service when there is a file uploaded', () => {
+ let change = new SimpleChange(null, '123', true);
+ component.ngOnChanges({ 'processInstanceId': change });
+ let file = new File([new Blob()], 'Test');
+ let customEvent = {
+ detail: {
+ files: [
+ file
+ ]
+ }
+ };
+ component.onFileUpload(customEvent);
+ expect(createProcessRelatedContentSpy).toHaveBeenCalled();
+ });
+});
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.ts
new file mode 100644
index 0000000000..a3ee2c6183
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-create-process-attachment.component.ts
@@ -0,0 +1,68 @@
+/*!
+ * @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, OnChanges, Input, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { ActivitiContentService } from 'ng2-activiti-form';
+
+@Component({
+ selector: 'activiti-create-process-attachment',
+ styleUrls: ['./activiti-create-process-attachment.component.css'],
+ templateUrl: './activiti-create-process-attachment.component.html'
+})
+export class ActivitiCreateProcessAttachmentComponent implements OnChanges {
+
+ @Input()
+ processInstanceId: string;
+
+ @Output()
+ error: EventEmitter = new EventEmitter();
+
+ @Output()
+ success: EventEmitter = new EventEmitter();
+
+ constructor(private translateService: AlfrescoTranslationService,
+ private activitiContentService: ActivitiContentService) {
+
+ if (translateService) {
+ translateService.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/src');
+ }
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['processInstanceId'] && changes['processInstanceId'].currentValue) {
+ this.processInstanceId = changes['processInstanceId'].currentValue;
+ }
+ }
+
+ onFileUpload(event: any) {
+ let files: File[] = event.detail.files;
+
+ for (let i = 0; i < files.length; i++) {
+ let file: File = files[i];
+
+ this.activitiContentService.createProcessRelatedContent(this.processInstanceId, file).subscribe(
+ (res) => {
+ this.success.emit(res);
+ },
+ (err) => {
+ this.error.emit(err);
+ }
+ );
+ }
+ }
+}