Skip to content

Instantly share code, notes, and snippets.

@thebigredgeek
Last active August 29, 2015 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thebigredgeek/a0ca5271d0a39e9919c8 to your computer and use it in GitHub Desktop.
Save thebigredgeek/a0ca5271d0a39e9919c8 to your computer and use it in GitHub Desktop.
angular.module('foo').directive('fileUpload', function($event){
return {
restrict: 'E',
scope: {
uploadEvent: '='
},
template: '<input type="file" style="display: inline-block; height: 100%; width: 100%"></input>',
link: function(scope, element){
var input = element.find('input');
element.css('display', 'inline'); //make sure the element itself behaves like an input visually so
//it contains child input element, applying the same natural behavior
element.on('click', input.trigger.bind(input)); //forward click events to the input element
input.on('change', function (e) {
var file = e.target.files[0];
if (file && scope.uploadEvent) $event.emit(scope.uploadEvent, file);
});
}
}
});
angular.module('foo').controller('FooCtrl', function($event, $scope){
//The following would return something like $scope.$id + "UploadEvent",
//which will always be unique because $scope.$id is always unique
this.UploadEvent = $event.getScopeNamespace($scope, 'UploadEvent');
$event.on(this.UploadEvent, function(file){
//do something with the file here
}, $scope); //in this pretend service, we are passing $scope
//with the listener so that the service will destroy
//the listener when $scope#$destroy occurs
});
<div ng-controller="FooCtrl as Foo">
<file-upload output-event="Foo.UploadEvent"></file-upload>
</div>
@a-chernykh
Copy link

Looks event-ish to me

@a-chernykh
Copy link

You might want to check https://github.com/danialfarid/ng-file-upload as well for some ideas how to implement it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment