How to upload multiple files in embedded form?

The below mentioned code helps to upload a single file when starting a process.

Please suggest me a method for uploading multiple files. But there should be only one input type for file selection.

Hey @manmohanm,

Could you please specify what your use case is and what you want to accomplish? In your case, the uploaded file is stored in the variable sample (see here for the details). So if you have multiple uploads in one input type then you would store all these files in one variable.

However, according to this you could set a multiple attribute to upload several files in one input field. I have conducted a brief test and it seems to work. Though no guarantees on that.

Hope that helps :slight_smile:

Best,
Johannes

Yep, you can use the multiple attribute on the input field to allow selecting multiple files. You would then need to use Javascript to upload the files to different process variables, as each process variable can only hold one file. Check out this example to see how to upload a file with Javascript.

3 Likes

Hey @manmohanm,

I create a ticket regarding your issue. When you’re done implementing, feel free to provide a pull request with an example on how to upload several files. I’m sure other users would appreciate your help :wink:

Best,
Johannes

@JoHeinem , Thanks for your suggestion . Its a pleasure to contribute to open source community once i have completed.

But right now am facing some issue.

Based on the user doc I have created a sample embedded form for uploading multiple files. It stores multiples files into the db.
Now i am facing some issues in downloading the uploaded files

Code snippet for uploading multiple files is mentioned below

Upload

How can i show download option in the next user forms.

I have tried using but it does not show any link for download.

In ACT_RU_VARIABLE table i can see my uploaded files info , but i can see a null value in TEXT_ column.

I tried rest api to fetch process variable , response is given below :

{“PTC_DOC2”:{“type”:“Bytes”,“value”:“iVBORw0KGgoAAAANSUhEUgAAABsAAAAYCAYAAAALQIb7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5REFCRjk1MDY3QjExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5REFCRjk0MDY3QjExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgwMTE3NDA3MjA2ODExODA4M0ZFMkJBM0M1RUU2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNjgwMTE3NDA3MjA2ODExODA4M0U3NkRBMDNEMDVDMSIvPiA8ZGM6dGl0bGU+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmdseXBoaWNvbnM8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pidbme0AAABqSURBVHjaYvz//z8DOYCRkfEDkOJHEvoINEsArx4KLMPQCDSLEZ8eJgY6glHLRi0DZwlQSkXCH2iW9PFliREcZ/jigOSgJxRnpMbNaJwNU8uomeqI8Rk/mhz/aJwNSstAOfv/sPQZQIABAFxdOQG7JyA+AAAAAElFTkSuQmCC”,“valueInfo”:{}},“PTC_DOC_1”:{“type”:“Bytes”,“value”:“iVBORw0KGgoAAAANSUhEUgAAABsAAAAYCAYAAAALQIb7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ1dWlkOjY1RTYzOTA2ODZDRjExREJBNkUyRDg4N0NFQUNCNDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5REFCRjk1MDY3QjExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5REFCRjk0MDY3QjExRTI5OUZEQTZGODg4RDc1ODdCIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgwMTE3NDA3MjA2ODExODA4M0ZFMkJBM0M1RUU2NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNjgwMTE3NDA3MjA2ODExODA4M0U3NkRBMDNEMDVDMSIvPiA8ZGM6dGl0bGU+IDxyZGY6QWx0PiA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPmdseXBoaWNvbnM8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pidbme0AAABqSURBVHjaYvz//z8DOYCRkfEDkOJHEvoINEsArx4KLMPQCDSLEZ8eJgY6glHLRi0DZwlQSkXCH2iW9PFliREcZ/jigOSgJxRnpMbNaJwNU8uomeqI8Rk/mhz/aJwNSstAOfv/sPQZQIABAFxdOQG7JyA+AAAAAElFTkSuQmCC”,“valueInfo”:{}}}

Thanks &Regards
Manmohan

Hi @manmohanm,

As @sebastian.stamm mentioned in his earlier post, you need to use Javascript to upload the files to different process variables, as each process variable can only hold one file.

When you have done this, you can show a download link for each variable as explained here.

So just using the multiple attribute is not sufficient to make the multiple upload work. Also have a look here to get some inspiration on how to implement this.

Best,
Johannes

Hi @manmohanm, @JoHeinem and @sebastian.stamm.

I’ve read this topic and I would like to ask you sth if you know.
I’ve got a form with 1 input file field in order to upload multiple files.
I’ve followed what you suggested here and I’ve included in my code snippet the script described here:
https://docs.camunda.org/manual/7.9/reference/embedded-forms/javascript/examples/#upload-large-files
After the submission of my form, I can see in the variables List of Cockpit a new variable of name (uploadedFile) and of type Bytes. When I download this file, I don’t know how to open it in order to check if it includes all my uploaded files from the form submission.
Does anyone know sth on this please?
Have I to make a REST call in a client (e.x. Postman) except for the script mentioned above?
And where can I find information in Docs in order to be informed about $http service for making requests?

Thank you in advance,
Steve

(post deleted by author)