Ad-hoc camunda-element creation issue

Camunda 7 Topics Discussion & Questions
,
1

Hi all,

I have to create a file upload component (custom directive) which has to look something like this:

Problem is that my upload-components which have following template are invalid so I cannot submit the form (+ I also need to define an ng-model).

<div class="form-group">
    	<div ng-repeat="fn in fileNames">
            <div class="form-group" ng-attr-id="{{fn + 'Row'}}">
                <div class="row">
                    <div class="col-sm-6">
                        <input type="file"
                               class="form-control"
                               ng-model="$parent.fileModels[fn]"
                               cam-variable-name="{{fn}}"
                               cam-variable-type="File"
                               cam-max-filesize="10000000"/>
                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-default"  ng-click="removeFile(fn)">
                            <span class="glyphicon glyphicon-minus-sign"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Failed validation (camVariableType error + required error)

<input type="file" class="form-control ng-dirty ng-invalid ng-invalid-cam-variable-type" ng-model="$parent.fileModels[fn]" cam-variable-name="DYN_FILE_1460965019162" cam-variable-type="File" cam-max-filesize="10000000">

I think all these exceptions is related to the fact that some of the behavior of the directives are not defined in the controllers but in custom external code;

 // next perform auto-scope binding for all fields which do not have custom bindings
    function autoBind(key, el) {
      var element = $(el);
      if(!element.attr('ng-model')) {
        var camVarName = element.attr(constants.DIRECTIVE_CAM_VARIABLE_NAME);
        if(!!camVarName) {
          element.attr('ng-model', camVarName);
        }
      }
    }

I could be mistaken so if there is a way to fix this I would be more than happy to hear it.

Kr,
Nico

2

Hi Nico,

the cam-variable-name and cam-variable-type directives are only applied once when the form is rendered initially. That means you cannot add elements with cam-variable-name attribute dynamically.

To get around this restriction, you can have a look at the Submitting Additional Variables and Upload Large Files examples.

Cheers
Sebastian

3

Thank you. This piece of code particularly looks like a solution. I will try it.

$scope.upload = function() {
            var formData = new FormData();
            formData.append('data', document.getElementById('fileUpload').files[0]);
            $http.post(Uri.appUri('engine://engine/:engine/process-instance/' + result.processInstanceId + '/variables/uploadedFile/data'), formData, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            });
          };

I found that the camVariableType error I got was due to the fact that I used File while I should have used Bytes + ng-required=‘false’ got me also rid of the required exception. But as you said, as all this code is not in the lifecycle of the camunda form, the form did not submit my variable - even when added to the variableManager.

4

It works. Here is my code if someone would ever be interested

       $scope.uploadFile = function(fileName) {
            if (document.getElementById(fileName).files[0] && document.getElementById(fileName).files[0].size > 0) {
                var formData = new FormData();
                formData.append('data', document.getElementById(fileName).files[0]);
                formData.append('valueType', 'File');
                $http.post('/engine-rest/task/' + $scope.camForm.taskId + '/variables/'+ fileName +'/data', formData, {transformRequest: angular.identity, headers: {'Content-Type': undefined}});
            }
        };
1 Like
5