<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div>
<span style="font-size: 18px;" file-select="file" fileread></span>
</div>
<button ng-click="clear()">clear</button>
<p>file: {{ file | json }}</p>
</div>
</body>
</html>
<!--<div choose-file layout="row" custom="ruleCtrl.test()"> -->
<!-- <input id="fileInput" type="file" class="ng-hide" fileread>-->
<!-- <md-input-container class="md-block" style="min-width: 400px;" >-->
<!-- <input type="text" for="mcattach" ng-model="fileName" disabled>-->
<!-- <div class="hint">Select your file</div>-->
<!-- </md-input-container>-->
<!-- <div layout="row">-->
<!-- <md-button class="md-icon-button md-fab md-primary md-mini" md-colors="{backgroundColor: 'primary-500'}">-->
<!-- <ng-md-icon icon="attach_file" style="fill:white"></ng-md-icon>-->
<!-- <md-tooltip md-direction="bottom" md-colors="{backgroundColor: 'primary-300'}">Browse File</md-tooltip>-->
<!-- </md-button> {{ruleCtrl.ruleObj1}}-->
<!-- </div>-->
<!-- </div> -->
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
// $scope.file = null;
$scope.clear = function() {
$scope.file = null;
};
});
app.directive('fileSelect', function() {
var template = '<input type="file" name="files"/>';
return function( scope, elem, attrs ) {
var selector = $( template );
elem.append(selector);
selector.bind('change', function( event ) {
scope.$apply(function() {
scope[ attrs.fileSelect ] = event.originalEvent.target.files;
});
});
scope.$watch(attrs.fileSelect, function(file) {
selector.val(file);
});
};
});
//file-pick.js -------mesaforte-ui
// (function() {
// var app = angular.module('RDash');
// app.controller('FilePickCtrl', function($scope) { })
// app.directive('chooseFile', ['DataUploaderService', function(DataUploaderService) {
// // var input = '<input type="file" name="files"/>';
// return {
// link: function(scope, elem, attrs) {
// var button = elem.find('button');
// var input = angular.element(elem[0].querySelector('input#fileInput'));
// button.bind('click', function() {
// input[0].click();
// });
// input.bind('change', function(e) {
// console.log("files: "+ e.target.files[0]);
// console.log("found attribute " + attrs.custom);
// var meth = scope.$eval(attrs.custom);
// console.log("ruleObje: "+ meth);
// meth = [];
// scope.$apply(function(files) {
// var files = e.target.files;
// if (files[0]) {
// scope.fileName = files[0].name;
// console.log("fileName: " + files[0].name);
// //var datJson = DataUploaderService.xlToJson(files[0]);
// //console.log("data json: "+ datJson);
// } else {
// scope.fileName = null;
// }
// });
// });
// }
// };
// }]);
// }());
// <div choose-file layout="row" custom="ruleCtrl.test()">
// <input id="fileInput" type="file" class="ng-hide" fileread>
// <md-input-container class="md-block" style="min-width: 400px;" >
// <input type="text" for="mcattach" ng-model="fileName" disabled>
// <div class="hint">Select your file</div>
// </md-input-container>
// <div layout="row">
// <md-button class="md-icon-button md-fab md-primary md-mini" md-colors="{backgroundColor: 'primary-500'}">
// <ng-md-icon icon="attach_file" style="fill:white"></ng-md-icon>
// <md-tooltip md-direction="bottom" md-colors="{backgroundColor: 'primary-300'}">Browse File</md-tooltip>
// </md-button> {{ruleCtrl.ruleObj1}}
// </div>
// </div>
/* Put your css in here */
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>