Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 29, 2015 17:59
Show Gist options
  • Save anonymous/ba1cc038423f3c570eca to your computer and use it in GitHub Desktop.
Save anonymous/ba1cc038423f3c570eca to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/folufu
Raw
index.html
<!DOCTYPE html>
<html ng-app="uploadApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="UploadCtrl">
<file-uploader on-select="addFile(file)"></file-uploader>
<p>{{ files.length }} files</p>
<ol>
<li ng-repeat="file in files">
<p>file</p>
</li>
</ol>
<script id="jsbin-javascript">
(function(ng, $){
ng.module('uploadApp', [])
.controller('UploadCtrl', ['$scope', function($scope) {
$scope.files = [];
$scope.addFile = function(file) {
$scope.files.push(file);
};
}])
.directive('fileUploader', ['$parse', function($parse) {
return {
restrict: 'E',
template: '<div><input type="file"><button type="button" ng-show="showAddBtn" ng-click="handleFile({file: file})">Add</button></div>',
scope: {
handleFile: '&onSelect'
},
link: function(scope, element, attrs) {
var fileInput = element.find('input');
fileInput.on('change', function() {
if(fileInput[0].files[0]) {
console.log('selected');
scope.$apply(function() {
scope.showAddBtn = true;
scope.file = fileInput[0].files[0];
});
} else {
console.log('unselected');
scope.$apply(function() {
scope.showAddBtn = false;
scope.file = null;
});
}
});
}
};
}]);
})(angular, angular.element);
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function(ng, $){
ng.module('uploadApp', [])
.controller('UploadCtrl', ['$scope', function($scope) {
$scope.files = [];
$scope.addFile = function(file) {
$scope.files.push(file);
};
}])
.directive('fileUploader', ['$parse', function($parse) {
return {
restrict: 'E',
template: '<div><input type="file"><button type="button" ng-show="showAddBtn" ng-click="handleFile({file: file})">Add</button></div>',
scope: {
handleFile: '&onSelect'
},
link: function(scope, element, attrs) {
var fileInput = element.find('input');
fileInput.on('change', function() {
if(fileInput[0].files[0]) {
console.log('selected');
scope.$apply(function() {
scope.showAddBtn = true;
scope.file = fileInput[0].files[0];
});
} else {
console.log('unselected');
scope.$apply(function() {
scope.showAddBtn = false;
scope.file = null;
});
}
});
}
};
}]);
})(angular, angular.element);</script></body>
</html>
Raw
jsbin.folufu.js
(function(ng, $){
ng.module('uploadApp', [])
.controller('UploadCtrl', ['$scope', function($scope) {
$scope.files = [];
$scope.addFile = function(file) {
$scope.files.push(file);
};
}])
.directive('fileUploader', ['$parse', function($parse) {
return {
restrict: 'E',
template: '<div><input type="file"><button type="button" ng-show="showAddBtn" ng-click="handleFile({file: file})">Add</button></div>',
scope: {
handleFile: '&onSelect'
},
link: function(scope, element, attrs) {
var fileInput = element.find('input');
fileInput.on('change', function() {
if(fileInput[0].files[0]) {
console.log('selected');
scope.$apply(function() {
scope.showAddBtn = true;
scope.file = fileInput[0].files[0];
});
} else {
console.log('unselected');
scope.$apply(function() {
scope.showAddBtn = false;
scope.file = null;
});
}
});
}
};
}]);
})(angular, angular.element);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment