// Version (see package.json) // AngularJS simple file upload directive // this directive uses an iframe as a target // to enable the uploading of files without // losing focus in the ng-app. // //
//
//
// ng-upload-loading="loading()" // // //
//
//
// // angular.module('app', ['ngUpload']) // .controller('mainCtrl', function($scope) { // $scope.loading = function() { // console.log('loading...'); // } // $scope.completed = function(content) { // console.log(content); // }; // }); // angular.module('ngUpload', []) .directive('uploadSubmit', ["$parse", function($parse) { // Utility function to get the closest parent element with a given tag function getParentNodeByTagName(element, tagName) { element = angular.element(element); var parent = element.parent(); tagName = tagName.toLowerCase(); if ( parent && parent[0].tagName.toLowerCase() === tagName ) { return parent; } else { return !parent ? null : getParentNodeByTagName(parent, tagName); } } return { restrict: 'AC', link: function(scope, element, attrs) { element.bind('click', function($event) { // prevent default behavior of click if ($event) { $event.preventDefault(); $event.stopPropagation(); } if (element.attr('disabled')) { return; } var form = getParentNodeByTagName(element, 'form'); form.triggerHandler('submit'); form[0].submit(); }); } }; }]) .directive('ngUpload', ["$log", "$parse", "$document", function ($log, $parse, $document) { var iframeID = 1; // Utility function to get meta tag with a given name attribute function getMetaTagWithName(name) { var head = $document.find('head'); var match; angular.forEach(head.find('meta'), function(element) { if ( element.getAttribute('name') === name ) { match = element; } }); return angular.element(match); } return { restrict: 'AC', link: function (scope, element, attrs) { // Give each directive instance a new id iframeID++; function setLoadingState(state) { scope.$isUploading = state; } var options = {}; // Options (just 1 for now) // Each option should be prefixed with 'upload-options-' or 'uploadOptions' // { // // add the Rails CSRF hidden input to form // enableRailsCsrf: bool // } var fn = attrs.ngUpload ? $parse(attrs.ngUpload) : null; var errorCatcher = attrs.errorCatcher ? $parse(attrs.errorCatcher) : null; var loading = attrs.ngUploadLoading ? $parse(attrs.ngUploadLoading) : null; if ( attrs.hasOwnProperty( "uploadOptionsConvertHidden" ) ) { // Allow blank or true options.convertHidden = attrs.uploadOptionsConvertHidden != "false"; } if ( attrs.hasOwnProperty( "uploadOptionsEnableRailsCsrf" ) ) { // allow for blank or true options.enableRailsCsrf = attrs.uploadOptionsEnableRailsCsrf != "false"; } if ( attrs.hasOwnProperty( "uploadOptionsBeforeSubmit" ) ) { options.beforeSubmit = $parse(attrs.uploadOptionsBeforeSubmit); } element.attr({ 'target': 'upload-iframe-' + iframeID, 'method': 'post', 'enctype': 'multipart/form-data', 'encoding': 'multipart/form-data' }); var iframe = angular.element( '