Here is a plunker example of something that i'm trying to do: http://plnkr.co/edit/dlktEzrBeFshGaZsTmg7?p=preview Basically i just want to use jquery file upload inside the modal window. as you can see in the plunker though, none of the callbacks are being called.
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$log.log("done accessed");
},
fail: function (e, data) {
$log.log("fail accessed");
},
progressall: function (e, data) {
$log.log("progressall");
},
//add: function(e,data){
//$log.log("add accessed");
//},
submit: function (e, data) {
var notetext = $("#descModal").val();
data.formData = { Description: notetext };
$log.log("submit accessed");
}
even the 'add' callback isn't being called when i add a file. This all works fine if i use angular strap, but i'd rather not use that for other reasons. I've investigated the modal initialization, and tried to override the windowTemplateURL
var theModal = $modal.open({ scope: $scope, templateUrl: modURL, controller: 'detailController', size: 'lg' });
(the default of which is here: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html ),and it looks like the problem is the 'modal-transclude' attribute. Any ideas on getting past this?
Never use jQuery selectors in your controller, write a directive. E.g.
angular.module("myapp").directive("fileUpload", function($log, $parse) {
return {
restrict: "A",
link: function(scope, element, attrs) {
var options = $parse(attrs.fileUpload)(scope) || {};
element.fileupload({
dataType: "json",
url: "your url",
done: function(e, data) {
$log.log("done accessed");
},
fail: function(e, data) {
$log.log("fail accessed");
},
progress: function(e, data) {
options.progress = parseInt(data.loaded / data.total * 100, 10);
scope.$apply();
$log.log("progress");
},
submit: function(e, data) {
$log.log("notetext:", options.notetext);
data.formData = {
Description: options.notetext
};
$log.log("submit accessed");
}
});
}
}
And use it in this way:
<input file-upload="fileUploadOptions" type="file" multiple data-sequential-uploads="true" />
Here's an updated plunker: http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview