Custom file upload button

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="buttonApp">
    
    <div file-button>
        <button class='btn btn-success btn-large'>Select your awesome file</button>
    </div>
    
    <div file-button>
        <img src='https://www.google.com/images/srpr/logo3w.png' />
    </div>
    
</div>
<p>The input's valid state is:</p>
<h1>{{picFile}}</h1>

JavaScript

/*globals angular:true*/
var buttonApp = angular.module('buttonApp', [])

buttonApp.directive('fileButton', function() {
  return {
    link: function(scope, element, attributes) {

      var el = angular.element(element)
      var button = el.children()[0]

      el.css({
        position: 'relative',
        overflow: 'hidden',
        width: button.offsetWidth,
        height: button.offsetHeight
      })

      var fileInput = angular.element('<input type="file" multiple />')
      fileInput.css({
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': '2',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'pointer'
      })

      el.append(fileInput)


    }
  }
})