Upload a file and multiple images in a task form

Camunda 7 Topics Discussion & Questions
,
1

Hi Camunda,

I am trying to upload one file and 2 images in a task form and I am unable to find any working examples of this. Could you please give an example how to achieve this?

Thanks,
Jasleen

2

Hi @jasleen,

What Kind of Form are you using? For embedded Forms, have a look at this: https://docs.camunda.org/manual/7.10/reference/embedded-forms/controls/files/#uploading-files

KR
Martin

3

Thanks Martin for your reply. Yes, I am using an embedded form. The link that you mentioned only tells how to use the cam variable for file. I had to struggle a lot to find that we have to write JavaScript code too to upload them. I think it would be better if you mention this as well in the documentation. I was able to upload. The challenge that I am facing right now is that the uploaded file is a byte array and I need to send it to restheart as part of a json. Any idea how I can do this? Basically I need to save the uploaded file in mongodb lying in another machine so that I can show it in the UI.

4

Hi @jasleen,

Thank you for the feedback, we will take it into consideration.

Could you describe your Problem in more detail? Are you trying to uploading them to the mongodb in the usertask? What API endpoints are you using? You could use base64 encoding for the file storage in JSON.

1 Like
5

I was able to store file in mongodb using the rest API for Camunda. Didn’t know Camunda saves all the history. Thanks. :smiley:
Now, I am looking for some sample code that can upload multiple files.

1 Like
6

Any help regarding multiple file upload? I am still unclear.

7

Hi @jasleen,

Sorry for the late reply. You mentioned earlier that you don’t use the cam-variable field but custom JS code. Could you share how you currently upload your file(s) so I can make a suggestion based on that?

KR
Martin

8

I am using below code to upload multiple files.

I am able to upload more than 1 file with this code but the problem is I am unable to retain the original filename even though I am using valueInfo attribute. It sets valueInfo as null.

10
inject([ '$scope', function($scope) { $scope.files = []; var fileUploadCount; $scope.upload = function(fileUpload) { fileUploadCount=fileUpload.files.length; for (var i = 0; i < fileUpload.files.length; i++) { var file = { name: fileUpload.files[i].name, mimetype: fileUpload.files[i].type, data: undefined}; $scope.retrieveFiledata(fileUpload.files[i], file); } $scope.$apply(); };
11

$scope.retrieveFiledata = function (file, fileData) {
var reader = new FileReader();
reader.onload = function (event) {
fileData.blob = reader.result;
var binaryString = event.target.result;
fileData.data = btoa(binaryString);
$scope.files.push(fileData);
};
reader.readAsBinaryString(file);
};

  camForm.on('submit', function() {
    $scope.files.forEach(function (file, index) {
      camForm.variableManager.createVariable({
        name: 'MYFILEs_' + index,
        type: 'Bytes',
        value: file.data,
       valueInfo: {
            filename: file.name,
            mimetype: file.type

        }
      });
    });
  });

}]);
2 Likes
12

@jasleen, try to use type: 'File' in the createVariable call.

13

Thank you so much :slight_smile: :slight_smile: I am able to download now with its original name.

14

Sorry for reopening this old topic, but it fits perfect to my use-case.
I would like to use a similiar JS code to upload a file at the beginning of the process.
Can I add someting to the code to actually upload a file from my local pc?

15