#612 simple upload widget (activiti form)

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

@@ -43,6 +43,9 @@
                         <div *ngSwitchCase="'readonly-text'">
                             <display-text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></display-text-widget>
                         </div>
+                        <div *ngSwitchCase="'upload'">
+                            <upload-widget [field]="field" (fieldChanged)="fieldChanged($event);"></upload-widget>
+                        </div>
                         <div *ngSwitchDefault>
                             <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
                         </div>

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-types.ts

@@ -23,6 +23,7 @@ export class FormFieldTypes {
     static RADIO_BUTTONS: string = 'radio-buttons';
     static DISPLAY_VALUE: string = 'readonly';
     static READONLY_TEXT: string = 'readonly-text';
+    static UPLOAD: string = 'upload';
 
     static READONLY_TYPES: string[] = [
         FormFieldTypes.HYPERLINK,

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

@@ -129,33 +129,48 @@ export class FormFieldModel extends FormWidgetModel {
     }
 
     updateForm() {
-        if (this.type === FormFieldTypes.DROPDOWN) {
+
-            /*
+        switch (this.type) {
-             This is needed due to Activiti reading dropdown values as string
+            case FormFieldTypes.DROPDOWN: {
-             but saving back as object: { id: <id>, name: <name> }
+                /*
-             */
+                 This is needed due to Activiti reading dropdown values as string
-            if (this.value === 'empty' || this.value === '') {
+                 but saving back as object: { id: <id>, name: <name> }
-                this.form.values[this.id] = {};
+                 */
-            } else {
+                if (this.value === 'empty' || this.value === '') {
+                    this.form.values[this.id] = {};
+                } else {
+                    let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
+                    if (entry.length > 0) {
+                        this.form.values[this.id] = entry[0];
+                    }
+                }
+                break;
+            }
+            case FormFieldTypes.RADIO_BUTTONS: {
+                /*
+                 This is needed due to Activiti issue related to reading radio button values as value string
+                 but saving back as object: { id: <id>, name: <name> }
+                 */
                 let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
                 if (entry.length > 0) {
                     this.form.values[this.id] = entry[0];
+                } else if (this.options.length > 0) {
+                    this.form.values[this.id] = this.options[0];
                 }
+                break;
             }
-        } else if (this.type === FormFieldTypes.RADIO_BUTTONS) {
+            case FormFieldTypes.UPLOAD: {
-            /*
+                if (this.value && this.value.length > 0) {
-             This is needed due to Activiti issue related to reading radio button values as value string
+                    this.form.values[this.id] = `${this.value[0].id}`;
-             but saving back as object: { id: <id>, name: <name> }
+                } else {
-             */
+                    this.form.values[this.id] = null;
-            let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
+                }
-            if (entry.length > 0) {
+                break;
-                this.form.values[this.id] = entry[0];
-            } else if (this.options.length > 0) {
-                this.form.values[this.id] = this.options[0];
             }
-        } else {
+            default: {
-            if (!FormFieldTypes.isReadOnlyType(this.type)) {
+                if (!FormFieldTypes.isReadOnlyType(this.type)) {
-                this.form.values[this.id] = this.value;
+                    this.form.values[this.id] = this.value;
+                }
             }
         }
     }

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

@@ -27,6 +27,7 @@ import { HyperlinkWidget } from './hyperlink/hyperlink.widget';
 import { RadioButtonsWidget } from './radio-buttons/radio-buttons.widget';
 import { DisplayValueWidget } from './display-value/display-value.widget';
 import { DisplayTextWidget } from './display-text/display-text.widget';
+import { UploadWidget } from './upload/upload.widget';
 
 // core
 export * from './widget.component';
@@ -46,6 +47,7 @@ export * from './hyperlink/hyperlink.widget';
 export * from './radio-buttons/radio-buttons.widget';
 export * from './display-value/display-value.widget';
 export * from './display-text/display-text.widget';
+export * from './upload/upload.widget';
 
 export const CONTAINER_WIDGET_DIRECTIVES: [any] = [
     TabsWidget,
@@ -61,7 +63,8 @@ export const PRIMITIVE_WIDGET_DIRECTIVES: [any] = [
     HyperlinkWidget,
     RadioButtonsWidget,
     DisplayValueWidget,
-    DisplayTextWidget
+    DisplayTextWidget,
+    UploadWidget
 ];
 
 

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

@@ -0,0 +1,17 @@
+.upload-widget {
+    width:100%
+}
+
+.upload-widget__icon {
+    float: left;
+}
+
+.upload-widget__file {
+    float: left;
+    margin-top: 4px;
+}
+
+.upload-widget__reset {
+    float: left;
+    margin-top: 4px;
+}

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

@@ -0,0 +1,15 @@
+<div class="upload-widget">
+
+    <label [attr.for]="field.id">{{field.name}}</label>
+    <div>
+        <i class="material-icons upload-widget__icon">image</i>
+        <span *ngIf="hasFile" class="upload-widget__file">{{getUploadedFileName()}}</span>
+        <input *ngIf="!hasFile"
+               #file
+               type="file"
+               [attr.id]="field.id"
+               class="upload-widget__file"
+               (change)="onFileChanged($event)">
+        <button *ngIf="hasFile" (click)="reset(file);" class="upload-widget__reset">X</button>
+    </div>
+</div>

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

@@ -0,0 +1,103 @@
+/*!
+ * @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, OnInit } from '@angular/core';
+import { WidgetComponent } from './../widget.component';
+import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+
+declare let __moduleName: string;
+declare var componentHandler;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'upload-widget',
+    templateUrl: './upload.widget.html',
+    styleUrls: ['./upload.widget.css']
+})
+export class UploadWidget extends WidgetComponent implements OnInit {
+
+    constructor(private settingsService: AlfrescoSettingsService,
+                private authService: AlfrescoAuthenticationService) {
+        super();
+    }
+
+    hasFile: boolean;
+    fileName: string;
+
+    ngOnInit() {
+        if (this.field &&
+            this.field.value &&
+            this.field.value.length > 0) {
+            this.hasFile = true;
+        }
+    }
+
+    getUploadedFileName(): string {
+        let result = this.fileName;
+
+        if (this.field &&
+            this.field.value &&
+            this.field.value.length > 0) {
+            let file = this.field.value[0];
+            result = file.name;
+        }
+
+        return result;
+    }
+
+    reset() {
+        this.field.value = null;
+        this.field.json.value = null;
+        this.hasFile = false;
+    }
+
+    onFileChanged(event: any) {
+        let files = event.srcElement.files;
+        if (files && files.length > 0) {
+
+            let file = files[0];
+
+            this.hasFile = true;
+            this.fileName = file.name;
+
+            let formData: FormData = new FormData();
+            formData.append("file", file, file.name);
+
+            let xhr: XMLHttpRequest = new XMLHttpRequest();
+
+            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);
+        }
+    }
+
+}