Adding image to embedded form

Camunda 7 Topics Discussion & Questions
1

I’m trying to display an image which I have uploaded as part of the deployment in Cockpit on an embedded form.

I noticed two issues:

  1. When I download the image from Camunda after deployment, I find that the file cannot be opened. It says the file is corrupted. Is there something wrong with the upload and how to rectify this?
  2. I came across numerous articles to display the image in an embedded form, but I seem to be hitting a wall since none of this displays the image. I doubt if it has to do with the above issue.

My Code

<form role="form">
<script cam-script type="text/form-script">
inject([ '$scope', '$http', 'Uri', function($scope, $http, Uri) {
      camForm.on('form-loaded', function() {
        var deploymentId = camForm["options"]["deploymentId"];  

$http.get(Uri.appUri('engine://engine/:engine/deployment/' + deploymentId + '/resources')).then(successCallback, errorCallback);

function successCallback(response){
    
	function fileNeeded(value)
	{
          return value["name"] == "my-logo.png";
    }
	
	 $scope.resourceId = response.data.filter(fileNeeded)[0]["id"];
	 $scope.deploymentId = deploymentId;
	
}
function errorCallback(error){
    alert("main - " + error);
}
    });
  }]);

  </script>

<h1>Welcome</h1>
<img src="/engine-rest/engine/default/deployment/{{deploymentId}}/resources/{{resourceId}}/data"/>
</form>
2

Hi @etp,

have you tried it the way described here? If so, do you get any error messages in the browser console?

3

Hi @martin.stamm,

Yes. I already tried this. The error is as follows:

**Communication Error**   **:** The application received an unexpected 400 response from the server. Try to refresh the page or login and out of the application.
**Form failure:**  $http.get(...).success is not a function

I also tried

<form role="form">
  <script cam-script type="text/form-script">
    inject(['$http', 'Uri', function($http, Uri) {
      camForm.on('form-loaded', function() {
	  $http.get(Uri.appUri("engine://engine/:engine/task/" + camForm.taskId + "/form")).then(successCallback, errorCallback);

	function successCallback(response)
	{
		$scope.contextPath = response.data;
	}
	
	function errorCallback(error)
	{
		alert("error - " + error);
	}
      });
    }]);
  </script>

  <img ng-src="{{contextPath}}/logo.png" />

</form>

But it always ends up in the errorCallback section.

4

Hi @etp,

I see, the documentation uses a deprecated API. I created a ticket to update the examples. Sorry about that.

Is the error from your second attempt the same as in the first (unexpected 400)?

5

Hi @martin.stamm,

Yes, the second code block also gives

**Communication Error** **:** The application received an unexpected 400 response from the server. Try to refresh the page or login and out of the application.

6

I tried to recreate it locally and I can’t reproduce it. The Request URL should look something like this: http://localhost:8080/camunda/api/engine/engine/default/task/732279fa-b43b-11e9-8f3a-0242300cc66b/form.

Also check if the JSESSIONID and XSRF-TOKEN are valid (i.e. match the requests generated by tasklist)

7

Hi @martin.stamm,

Is this also applicable for a scenario where the logo.png file is deployed from Cockpit along with the BPMN file and HTML forms?
Or will the Request Url be different?

8

I just checked how cockpit deploys resources. It seems that the encoding is always ‘text/xml’, which probably breaks pictures (related ticket).

However, the request Url should be the same (the ID after task/ will be different). The contextPath is null as you deployed it using the REST API and not as a war. So the request described in your first Post was the correct approach in the first place. Sorry for the confusion.

There are 3 options that I can think of:

  1. Try the deployment using the REST API with an external REST client, so the picture does not get corrupted
  2. deploy as a WAR and use the context path
  3. embed the picture in the HTML as a Data URI

If you just want a static picture and don’t plan to change it frequently, I would use option 3 as it does not require external calls at all.

9

Thanks @martin.stamm, I used option 3 since it’s a static image and resolved this.