So I am trying to use fine-uploader with an AngularJS directive but without depending on jQuery. I'm trying to decrease the foot print for my mobile web app so I'm looking to eliminate the jQuery dependency. Is there any other way to initialise the fineUploader module on the given/injected element in the directive?
I have a nodeJS backend which interfaces with the s3 sdk.
function bindToRenderedTemplate($compile, $scope, element) {
$compile(element.contents())($scope);
}
angular.module("myApp")
.directive("fineUploaderS3", function() {
return {
restrict: "ECMA",
controller: 'FaceCardEditCtrl',
replace: true,
link: function($scope, element, $compile) {
$scope.uploader = new qq.s3.FineUploader({
element: element[0],
request: {
// REQUIRED: We are using a custom domain
// for our S3 bucket, in this case. You can
// use any valid URL that poidddnts to your bucket.
endpoint: "my.s3.endpoint",
// REQUIRED: The AWS public key for the client-side user
// we provisioned.
accessKey: "MYACCESSKEY"
},
objectProperties: {
acl: "my-acl-property"
},
template: "qq-template-bootstrap",
signature: {
endpoint: "/s3handler"
},
scaling: {
sendOriginal: false,
sizes: [
{name: "small", maxSize: 200}
]
},
uploadSuccess: {
endpoint: "/s3/uploadSuccessful"
},
// USUALLY REQUIRED: Blank file on the same domain
// as this page, for IE9 and older support.
iframeSupport: {
localBlankPagePath: "success.html"
},
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png"],
acceptFiles: "image/gif, image/jpeg, image/png",
itemLimit: 1,
sizeLimit: 1000000
},
thumbnails: {
placeholders: {
notAvailablePath: "assets/placeholders/not_available-generic.png",
waitingPath: "assets/placeholders/waiting-generic.png"
}
}
});
bindToRenderedTemplate($compile, $scope, element);
}
}
});
The error I get when the page loads is this:
TypeError: object is not a function
at bindToRenderedTemplate (http://localhost:9000/scripts/directives/fineUploaderDirective.js:4:5)
at link (http://localhost:9000/scripts/directives/fineUploaderDirective.js:70:17)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6579:13)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5986:15)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5989:13)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5989:13)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6573:24)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5986:15)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:5891:30)
at http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2805:9 <div class="uploader" fine-uploader-s3="" ng-click="uploadImage()">
and this occurs in the line: $compile(element.contents())($scope); in the bindToRenderedTemplate function
function bindToRenderedTemplate($compile, $scope, element) {
$compile(element.contents())($scope);
}
Can anyone see anything wrong with this implementation?
The problem lies in that you are trying to inject the $compile at the wrong place:
link: function($scope, element, $compile) {
this way the thing in the $compile variable will actually be an object holding the attributes on the element. See more at https://docs.angularjs.org/guide/directive, under the Creating a Directive that Manipulates the DOM section
The corrected version would be something like this:
angular.module("myApp")
.directive("fineUploaderS3", function($compile) {
return {
...
link: function($scope, element) {
...
bindToRenderedTemplate($compile, $scope, element);
}
}
});
Note that the $compile variable has been moved from the function in the line 5 to the function in the line 2.
Hi Irukavina thanks for the tip
I've actually managed to fix the problem. In my directive I was specifying 'element' without the '$' prefix. When I included this all things worked as expected :) But your tip also led me in the right direction.
Modified code:
angular.module("myApp")
.directive("fineUploaderS3", function($compile) {
return {
restrict: "ECMA",
controller: 'FaceCardEditCtrl',
replace: true,
link: function($scope, $element) {
}
}
});