<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="Ctrl">
<button ng-click="openModal()" class="btn btn-info">Open Modal</button>
</div>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-sanitize.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.iframe-transport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.js"></script>
<script>
angular.module("myapp", ["ngAnimate", "ngSanitize", "ui.bootstrap"])
.controller("Ctrl", function($scope,$modal, $log) {
$scope.openModal = function () {
$log.log("opening modal");
var modURL = "modalwindow.html";
var theModal = $modal.open({ scope: $scope, templateUrl: modURL, controller: 'detailController', size: 'lg' });
theModal.opened.then(function () {
$log.log("modal opened");
$scope.setFileUploadBinding();
$log.log("file binding set");
});
};
$scope.setFileUploadBinding = function () {
$('#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");
}
});
};
})
.controller('detailController', function ($scope, $modalInstance) {
$scope.closeModal = function () {
$modalInstance.close();
};
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
<div class="modal-header">
<h4 class="modal-title">Attachment</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Description:</label>
<div><textarea id="descModal"></textarea>
</div>
</div>
<div class="form-group">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
<span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select to Upload file</span><input id="fileupload" type="file" name="attData" multiple data-sequential-uploads="true" /></span>
</div>
</div>
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<div id="files" class="files"></div>
</div>
<div class="modal-footer">
<button ng-click="closeModal()" class="btn btn-warning">Cancel</button>
</div>