Currently, I am working on developing a custom file field in my AngularJS application. To achieve this, I have created a button using a span element and placed the file input as its child.
However, upon clicking the span (button), I encountered the following error:
Uncaught RangeError: Maximum call stack size exceeded
The main objective is to trigger the click event of the file field when the span is clicked.
Could someone help me resolve this issue?
Below is a snippet of my HTML code (with multiple instances):
<div class="row row3">
<div class="cell">
<a ng-href="">Contract Details</a>
<span class="fileUpload">
Upload Report
<!-- handled by directive through class name -->
<input
info="contractor.Id"
upload="uploadFile"
class="uploadField upload-file-directive"
type="file" />
</span>
</div>
</div>
CSS styling (focusing on functionality):
.fileUpload .uploadField
border : 1px solid red;
position : absolute;
left : -200em;
My current Directive:
// File upload functionality implemented here
var uploadFileDirective = function () {
return {
replace: false,
restrict : 'C',
scope : {
info:"=",
upload:"="
},
link:function ( scope, element, attrs ) {
var button = element.parent('.fileUpload'); // selecting parent
button.on( 'click', function () {
$(this).children('.uploadField').click(); // triggering
});
element.on('change', function ( event ) { // change event handling
var files = event.target.files;
scope.upload(files, scope.info );
});
}
}
}
angular.module("tcpApp")
.directive("uploadFileDirective", uploadFileDirective);
Despite the efforts made, I continue to face the mentioned error. Can anyone suggest the correct approach to creating a custom file field?