PDF in Form embedded


I explain you my problem. I have a file in my process instance. It’s a binary variable, in Cockpit I can easly download my PDF.
i follow this to store in the database :

But in my embedded form I want to display this pdf or open a new page that contain this pdf.
i try this simple :
< iframe src="data:{{ camForm.variableManager.variable(‘justificatifFile’).value }} " >

but it still not work, when i use the console.log to see the content of my variable justificatifFile it’s undefined…

Can I have some Help please ?


Hi @Patrice,

The Value of the Variable is not fetched into the frontend as those can be really big files. Instead you get a path to download the contents with camForm.variableManager.variable(‘justificatifFile’).contentUrl

If you need the file data of the pdf, fetch the data with a script and continue from there. Some resources that might help you are:

@martin.stamm Thanks for you’r reply.
I already fetch the variable like this


I try this :

inject([’$http’, ‘Uri’, function($http, Uri) {
camForm.on(‘form-loaded’, function() {

    $http.get(Uri.appUri("engine://engine/:engine/task/" + camForm.taskId + "/form")).then(function(result){
      $scope.contextPath = result.contextPath;

and in the form

< img ng-src="{{contextPath}}/JUSTIFICATIF.pdf" />
but i have this error : TypeError: Cannot read property ‘value’ of undefined

i try also
< div class=“form-group”>
< label class=“control-label”>Piece d’identitee :
< div class=“controls”>
< a href="{{ camForm.variableManager.variable(‘justificatifFile’).contentUrl }}" target="_blank">Camunda variable
< /div>
< /div>
But when I click nothing happen

Hi @Patrice,

we have page in our demo archetype to display the PDF document in an embedded form.

You can either create a project from the camunda-archetype-demo (https://docs.camunda.org/manual/7.11/user-guide/process-applications/maven-archetypes/)

or have a look here:

Hope this helps, Ingo

Thank you @Ingo_Richtsmeier i check and i give you me feedback :slight_smile:

I’m trying your solution but I have 1 question in your example this line :
< object data="{{contextPath}}/file-variable?taskId={{taskId}}&variableName=document" type=“application/pdf” style=“width:100%; height:585px;” >

refer to a variable named document. I suppose this variable is a process instance variable, but what it’s the type ? a Byte value or a File value ?

You can see for me how the variable appear in Cockpit

this is my error :

:8080/forms/task-form.html/file-variable?taskId=cdec3228-fbe2-11e9-97ca-000c299b2f61&variableName=justificatifFile:1 GET http://localhost:8080/forms/task-form.html/file-variable?taskId=cdec3228-fbe2-11e9-97ca-000c299b2f61&variableName=justificatifFile 404