【Bonita BPM】UI Designer 客製化元件 實際範例 - Part4：UploadToAlfresco

tags: Bonita BPM UI Designer

Common 基礎知識

【Bonita BPM】UI Designer 客製化元件 - Part1：基礎知識

UploadToAlfresco

Properties 屬性

• getURL
  • Label: URL
  • Treat as Dynamic value
  • Type: text

Template 視圖

<form enctype="multipart/form-data" id="uploadForm" method="post" name="uploadForm">
    <table>
        <tr>
            <td><input name="file" type="file" accept=".pdf" ></td>
            <td><input type="submit" value="新增附件" ng-click="ctrl.uas()"></td>
        </tr>
    </table>
</form>

Controller 控制器

function ($scope) {
    this.uas = function uploadAndSubmit() {
    	try {
    		var form = document.forms["uploadForm"];
            
    		if (form["file"].files.length > 0) {
    			var file = form["file"].files[0];
    			var reader = new FileReader();
    			reader.readAsBinaryString(file);
                
    			reader.onloadend = function() {
    				var formData = new FormData();
    				formData.append('filedata', file);
                    
    				var xhr = new XMLHttpRequest();
    				xhr.withCredentials = true;
                    
    				xhr.addEventListener("readystatechange", function() {
    					if (this.readyState === 4) {
    						console.log(this.responseText);
    					}
    				});
    				xhr.open("POST", $scope.properties.getURL);
                    
    				xhr.onload = function() {
    					alert("Already sending.");
    				};
    				xhr.send(formData);
    				alert("上传成功");
    			};
                
    		} else {
    			alert("请选择一个文件");
    		}
    	} catch (e) {
    		alert("error:" + e);
    	}
    }
}

Reference 參考資料

1. Bonita UI，CUSTOM WIDGET EDITOR上的範例及解說

Part5：GetInvoiceStateButton

連結：【Bonita BPM】UI Designer 客製化元件 實際範例 - Part5：GetInvoiceStateButton