JSPM

angular-file-model

0.3.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 669
  • Score
    100M100P100Q97237F
  • License MIT

Angular support for file in models

Package Exports

  • angular-file-model

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-file-model) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular-file-model Code Climate

Simple Angular.js directive that allows input element's of type file to be handled in models inside a controller's scope.

Usage

Install with bower:

bower install angular-file-model --save

Add to your HTML files:

<script src='/bower_components/angular-file-model/angular-file-model.js'></script>

Now, inject to your application:

angular.module('myApp', ['file-model']);

Ready to use in your controllers!:

file.html:

<input type='file' file-model='fileModel'>
<button type='button' ng-click='upload()'>Upload</button>

controller.js:

var DemoCtrl = [
  '$scope', 
  function ($scope) {
    $scope.upload = function () {
      $scope.fileModel // This is where the file is linked to.
    };
  }
]

Need an actual demo?

Go and check this out http://plnkr.co/edit/0ZHCsR.

Known Issues

  • Using a the modal controller from angular-ui I can't update the variable assigned to file-model: This is not an issue directly with angular-file-model. It's created because the modal controller uses transclusion. Actually, you can't update any other values directly. My workaround for this has been passing an empty object to the controller's scope and putting the file-model (just like other data from fields from the modal) into that object, so what I pass to file-model is something like: 'data.file' instead and it works. (data being already initialized as {} at least in the controller)

Author

© 2014, Jose Luis Rivas <me@ghostbar.co>.

License

The files are licensed under the MIT terms.