How do I tap into before form-loaded event?
I am using a library its instance needs to be initialized before the form is parsed. What is the beat way to get this done in Camunda
1 Like
When you are using a library that you need to initialize, you probably want to do this only once and not every time the user loads a task form, right?
In that case, I would recommend using custom scripts to include and initialize the library.
@sebastian.stamm I am loading the script through custom scripts.
But if you look at the code below I keep getting the following error
"Uploader" must be an instance of FileUploader
The Code 
<script cam-script type="text/form-script">
var variableManager = camForm.variableManager;
camForm.on('form-loaded', function() {
variableManager.fetchVariable('landingPageId');
variableManager.fetchVariable('batch_id');
variableManager.fetchVariable('selectTypeId');
});
inject(['$http', 'Uri', 'FileUploader', function($http, Uri, FileUploader) {
camForm.on('variables-applied', function() {
$scope.selectedData = {
select_type_id: null,
select_type_name: null,
script_id: null
};
$scope.landingPageId = variableManager.variable('landingPageId').value;
$scope.batchId = variableManager.variable('batch_id').value;
var uploader = $scope.uploader = new FileUploader({
url: 'path_to_server_uploadFile'
});
// a sync filter
uploader.filters.push({
name: 'syncFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
console.log('syncFilter');
return this.queue.length < 10;
}
});
// an async filter
uploader.filters.push({
name: 'asyncFilter',
fn: function(item /*{File|FileLikeObject}*/, options, deferred) {
console.log('asyncFilter');
setTimeout(deferred.resolve, 1e3);
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
var uploader = $scope.uploader = new FileUploader({
url: 'path_to_server_uploadFile'
});
};
console.info('uploader', uploader);
});
}]);
camForm.on('submit', function(evt) {
// evt.submitPrevented = true;
// $scope.showErrorMess = true;
});
</script>
<style>
.number {
padding-right: 10px;
}
.inline{
display: inline;
}
.no-textWrap{
white-space: nowrap !important;
}
.panel-cust-height{
height: 40px;
padding-top: 0px;
}
.notes-placeholder{
height: 200px;
overflow: scroll;
}
#theDESite{
resize: vertical;
resize: vertical;
min-height: 400px;
margin-bottom: 20px;
}
</style>
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
Base drop zone
</div>
</div>
Multiple file upload
<input type="file" nv-file-select="" uploader="uploader" multiple /><br/>
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
</section>
</form>
Thanks for looking at it.
Could you describe what you are trying to do and remove all irrelevant code from your example so that it only contains the necessary parts to reproduce the error?
I am implementing drag and drop file uploader using this Angular file upload library
I am adding the library through the custom script and then trying to use it.
Minimum code to replicate error
<form name="test1" id="test1" class="form-horizontal" ng-app>
<script cam-script type="text/form-script">
inject(['$http', 'Uri', 'FileUploader', function($http, Uri, FileUploader) {
camForm.on('variables-applied', function() {
var uploader = $scope.uploader = new FileUploader({
url: 'path_to_server_uploadFile'
});
// a sync filter
uploader.filters.push({
name: 'syncFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
console.log('syncFilter');
return this.queue.length < 10;
}
});
// an async filter
uploader.filters.push({
name: 'asyncFilter',
fn: function(item /*{File|FileLikeObject}*/, options, deferred) {
console.log('asyncFilter');
setTimeout(deferred.resolve, 1e3);
}
});
});
}]);
</script>
<div class="col-md-3">
<h3>Select files</h3>
<div ng-show="uploader.isHTML5">
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
Base drop zone
</div>
</div>
</div>
</form>
Thanks for helping
I don’t know the File-Uploader Library, but I assume you need to set the uploader attribute when the element is created and not when the variables-applied event is fired. Have you tried executing your code outside of the variables-applied hook? So to just injecting the FileUploader service and then creating the $scope variable without using any lifecycle events:
1 Like
Thanks for helping. It feels like it was running in a race condition possible bug with the library. I simply wrapped the HTML in ng-if="uploader" and life is good. Thanks again for helping 
Cheers
1 Like