A pure angular (no jquery) file field that functions like the native file input field but is displayed as a bootstrap button (also works without bootstrap see "styling" below) instead of the ugly system file upload field.
Adds support for ng-model and image preview.
Actions speak louder than words: Check out THE DEMO.
##Installation
Dependencies: Angular
Download and include angular-bootstrap-file-field.min.js
Create an angular app and inject bootstrap.fileField. That's about it.
bower
bower install angular-bootstrap-file-field##Usage
Minimal
<file-field ng-model="uploadFile">Add File</file-field>Show file name
<file-field ng-model="uploadFile">Add File</file-field>
{{uploadFile.name}}Show image preview
<file-field ng-model="uploadFile" preview="previewImage">Select File</file-field>
<img ng-src="{{previewImage}}">##Configuration
Options
| Name | Values | Description |
|---|---|---|
| ng-model | scope variable | Behaves like ng-model on any other form element. Just binds to the $scope value in the controller. |
| preview | scope variable | Optional. If provided a base64 encoded image url will be provided. (this can be used in the ng-src or an img tag to display a preview |
##Styling
This directive creates a <button> tag and gives it the class bootstrap class "btn" if no class or ng-class is specified.
####Example styling
bootstrap primary button
<file-field class="btn btn-primary" ng-model="foo"></file-field>custom classes
<file-field class="myCustomClass" ng-model="foo"></file-field>dynamic class
file-field also has full support for ng-class which can be used in conjunstion with the model attribute to make the button change classes (colors) once you select a file.
<file-field class="btn" ng-class="{'btn-success':foo}" ng-model="foo"></file-field>