AngularJs: How to check for changes in file input fields? 


angular.module('app', [])
  .controller('MainCtrl', MainCtrl)
  .directive('fileChange', fileChange);

  function MainCtrl($scope) {
    $scope.upload = function () {
      // do something with the file
      alert($scope.file.name);
    };
  }

  function fileChange() {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        fileChange: '&'
      },
      link: function link(scope, element, attrs, ctrl) {
        element.on('change', onChange);

        scope.$on('destroy', function () {
          element.off('change', onChange);
        });

        function onChange() {
          ctrl.$setViewValue(element[0].files[0]);
          scope.fileChange();
        }
      }
    };
  }
<div ng-app="app" ng-controller="MainCtrl">
  <input type="file" file-change="upload()" ng-model="file">
</div>
Url: https://github.com/angular/angular.js/issues/1375

Comments

Post a Comment

Popular posts from this blog

When to Use Flutter's FutureBuilder and Consumer for Data Retrieval from Provider?

Image
 In Flutter, both FutureBuilder and Consumer are used to manage state and retrieve data, but they serve different purposes and are used in different scenarios. Here's a detailed explanation to help you decide when to use each: FutureBuilder Use FutureBuilder when: Fetching Data Asynchronously: When you need to fetch data that is asynchronous, such as making network requests, database queries, or performing I/O operations. FutureBuilder listens to a Future and rebuilds the widget when the future completes. One-Time Data Fetch: When the data needs to be fetched only once, such as on screen initialization. Useful for scenarios where you don't expect the data to change and don't need real-time updates. Handling Different States: When you need to handle different states of data fetching (loading, success, error) in the widget tree. FutureBuilder provides a convenient way to show different UI based on the state of the Future . Consumer Use Consumer when: Using a State Mana...
Read more

Loading App Configuration from API Before Application Start in Flutter Using Provider, Similar to Angular's APP_INITIALIZER

Image
 To load app configuration from an API before the application starts in Flutter, similar to Angular's APP_INITIALIZER , you can use the FutureProvider from the provider package. Here's a step-by-step guide on how to achieve this: 1.  Add the provider package to your pubspec.yaml file: 2. Create a service to fetch the configuration: 3. Create a provider for the configuration: 4.  Setup the FutureProvider in your main.dart : In this setup: ConfigService handles the API call to fetch the configuration. ConfigProvider uses ChangeNotifier to manage the configuration state. FutureProvider in main.dart ensures the configuration is loaded before the app starts. FutureBuilder in MyApp widget displays a loading indicator while the configuration is being fetched. This approach ensures that your app waits for the configuration to be loaded before rendering the main content, similar to the APP_INITIALIZER functionality in Angular.
Read more