Upload multiple files in embedded form

Camunda 7 Topics Discussion & Questions
,
21

Hello c.beiever

Please help in this point how can i download all the download file .

only i need to mention :
a cam-file-download=“DOCUMENT_0”>Test1

a cam-file-download=“DOCUMENT_1”>Test1

note: some time i have one attachment i do not want to display all another one …

Regards
Suhaib

22

I already managed to solve your problem, if not I have a solution

1 Like
23

Hi @MarceloCP

could you post your solution.

Thanks.

24

I’m going to post here the whole solution is very big because I have to have a code to load the files and another one to fetch them. In the form above to upload multiple files:

HTML

<label class="control-label">Anexos</label>
    <table class="table">
      <tbody>
      <tr ng-repeat="file in files">
        <td>
          <a role="button">{{file.name}}</a>
        </td>
        <td>
          <span class="glyphicon glyphicon-remove" ng-click="removeDocument(file)" style="cursor:pointer"></span>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <label class="btn btn-default btn-file">
        Inserir Anexos <input type="file" id="fileUpload" style="display: none;" onchange="angular.element(this).scope().upload(this)" multiple>
        <i class="glyphicon glyphicon-folder-open"></i>
      </label>
    </div>

CAM-SCRIPT: *in the same html file

<script cam-script type="text/form-script">
inject([ '$scope', function($scope) {
      		$scope.files = [];
      		$scope.upload = function(fileUpload) {
     		   	for (let i = 0; i < fileUpload.files.length; i++) {
					let name = fileUpload.files[i].name
					let ext = name.split('.')
					ext = ext[ext.length - 1]
     		   		let file = { name: fileUpload.files[i].name, extensao: ext, mimetype: fileUpload.files[i].type, data: undefined, blob: undefined };
          		}
    	    	$scope.form.$setDirty();
	        	$scope.$apply();
      		};
     		$scope.retrieveFiledata = function (file, fileData) {
        		let reader = new FileReader();
        		reader.onload = function (event) {
          			fileData.blob = reader.result;
          			let binary = '';
          			let bytes = new Uint8Array(reader.result);
          			for (let i = 0; i < bytes.length; i++) {
            			binary += String.fromCharCode(bytes[i]);
          			}
          			fileData.data = btoa(binary);
        		};
        		reader.readAsArrayBuffer(file);
      		};
      		$scope.removeDocument = function (file) {
        		$scope.files.splice($scope.files.indexOf(file), 1);
      		};
		}])

camForm.on ('submit',function {
$scope.files.forEach(function (file, index) {
   	  			camForm.variableManager.createVariable({
       	   			name: 'sys_anexo_'+tipoAnexo+'_'+ index,
       				type: 'Bytes',
       				value: file.data
   				});
 	 			camForm.variableManager.createVariable({
       	   			name: 'sys_anexo_'+tipoAnexo+'_filename_' + index,
   			 		type: 'String',
       				value: file.name,
					isDirty: true
    			});
				camForm.variableManager.createVariable({
       	   			name: 'sys_anexo_'+tipoAnexo+'_ext_' + index,
       				type: 'String',
       				value: file.extensao
   	  			});
			});
			camForm.variableManager.variableValue('sys_qtd_anexo', $scope.files.length);
})
</script>

In the following form to show all attached files:

HTML:
<div id="tabela"></div>

CAM-SCRIPT: *in the same html file

inject(['$http', 'Uri', function($http, Uri) {
				var res = []
       			$http.get(Uri.appUri("engine://engine/:engine/task/" + camForm.taskId + "/variables/sys_qtd_anexo")).success(function(result){
          			var count = result.value
					var table = document.createElement('table')
					table.style = 'margin-bottom:20px';
					var tbody = document.createElement('tbody')
					for (var i=0; i<count; i++){
						$.ajax({
							url : "http://localhost:8080/engine-rest/task/"+camForm.taskId+"/variables/sys_anexo_"+tipoAnexo+"_filename_"+i,
				 			method : "GET",
				 			async : false
						}).done(function(res) {
							res = res.value
							let tr = document.createElement('tr');
							let td = document.createElement('td');
						   	let a = document.createElement('a');
    							a.setAttribute("cam-file-download","sys_anexo_"+tipoAnexo+"_"+i);
								a.setAttribute("href", "/camunda/api/engine/engine/default/task/"+camForm.taskId+"/variables/sys_anexo_"+tipoAnexo+"_"+i+"/data")
								a.setAttribute("class", "glyphicon glyphicon-file form-control")
								a.setAttribute("style", "border:none; color:blue")
								a.setAttribute("download", res)
								a.innerHTML = res
    						td.appendChild(a);
    						tr.appendChild(td);
							tbody.appendChild(tr);
						})
					}
					table.appendChild(tbody);
					document.getElementById('tabela').appendChild(table);
        		});
    		}]);

Some observations the variable sys_qtd_annex is the amount of files inserted I need it to then loop in the next form to load all the files, I also save the name, extension and the content itself in this case in bytes separately, I hope I helped .

25

Thank you for your answer, I tried to use your codes but there are some small errors and misunderstandings. Are you sure this is a working solution? I mean, maybe you accidentally entered an old version of your code snippet.

26

It’s the code I’m using in production, you can tell me what error appears there for you. The idea is to generate the files, names with the index of the for loop at the end of them, so in the next form just run this loop again with the amount of files that was inserted and it mounts all the files back

27

  1. The parentheses were missing here after function.

  2. As soon I try to upload a file, following error is appearing

VM4191:11 Uncaught TypeError: $scope.form.$setDirty is not a function
    at t.$scope.upload (eval at <anonymous> (deps.js?bust=7.15.0:1), <anonymous>:11:23)
    at HTMLInputElement.onchange ((Index):1)
28

I don’t know if that can be it but my tag has the attribute name as form. getting like this…

<form name="form>"

Try too remove the line $scope.form.setDirty

29