Skip to content

Instantly share code, notes, and snippets.

@lotosbin
Forked from maowug/angular-jQuery-Form-Plugin.js
Last active December 21, 2015 17:28
Show Gist options
  • Select an option

  • Save lotosbin/6340290 to your computer and use it in GitHub Desktop.

Select an option

Save lotosbin/6340290 to your computer and use it in GitHub Desktop.
// file upload controller
function FileUploadCtrl($scope) {
//when upload finished
$scope.uploadFinished=function(e,data){
console.log(e)
console.log(data)
};
//trigger the input to upload
$scope.triggerUpload = function () {
jQuery('#inputUpload').click();
};
}
anuglar.module('sampleapp',['jquery-form-directive']);
<html ng-app="sampleapp">
<head>
<!--<script src="angular.min.js"></script>-->
<script src="jquery-form-directive.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="FileUploadCtrl">
<p class="lead">CSV and *.pl is feasible.</p>
<form action="/upload" file-upload>
<a id="btnUploadCSV" class="btn btn-success" ng-click="triggerUpload()">Upload CSV</a>
<a id="btnUploadPL" class="btn btn-info" ng-click="triggerUpload()">Upload *.pl</a>
<!--btn will trigger the input field to upload-->
<input type="file" id="inputUpload" name="inputupload" style="visibility: hidden;" />
<button type="submit" class="btn" >submit</button>
</form>
</div>
</body>
</html>
angular.module('jquery-form-directive',[]).directive('fileUpload', function() {
return {
restrict : 'A',
controller : 'FileUploadCtrl',
link : function(scope, element, attrs, ctrl) {
var options = {
url:'/upload',
target:'#response',
type:'POST',
beforeSubmit : function() {
// callback: upload started
console.log('before submit...')
},
success : function() {
// callback: upload complete
console.log('success...')
}
};
// element - this is jquery element
element.ajaxForm(options);
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment