Detecting changes in AngularJs elements

Question

Detecting changes in AngularJs elements

Below is the code snippet provided:

  handleFileSelect = (evt) ->
    console.log(1)
    file = evt.currentTarget.files[0]
    reader = new FileReader()
    reader.onload = (evt) ->
      $scope.$apply ($scope) ->
        $scope.myImage = evt.target.result
      reader.readAsDataURL(file)
  angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect)

Here is the corresponding HTML:

<div class="form-group ng-scope">
  <label class="col-sm-2 control-label" for="image">Image:</label>
  <div class="col-sm-10">
    <div class="cropFile">
      <input id="fileInput" type="file">
    </div>
  </div>
</div>

I am expecting to see '1' in the console after changing a file in #fileInput. However, nothing appears when I select a file. How can this issue be resolved? Thank you!

javascript angularjs

Answer 1

Answer №1

To implement this functionality, you can create a custom directive.

I have developed a directive called upload

HTML Section

<div><input style="margin: 0 auto;" type="file" id="fileInput" upload></div>

Javascript for Directive

myapp.directive('upload', function($rootScope) {
return {
    restrict: 'EA',
    link: function(scope, elem, attrs) {
        elem.on("change" ,function(evt) {
            var file = evt.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function(evt) {
                scope.$apply(function($scope) {
                    $rootScope.myImage = evt.target.result;
                    console.log($rootScope.myImage);
                });
            };
            reader.readAsDataURL(file);
        });
    }
  };
});

Answer 2

To implement this functionality, you can create a custom directive.

I have developed a directive called upload

HTML Section

<div><input style="margin: 0 auto;" type="file" id="fileInput" upload></div>

Javascript for Directive

myapp.directive('upload', function($rootScope) {
return {
    restrict: 'EA',
    link: function(scope, elem, attrs) {
        elem.on("change" ,function(evt) {
            var file = evt.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function(evt) {
                scope.$apply(function($scope) {
                    $rootScope.myImage = evt.target.result;
                    console.log($rootScope.myImage);
                });
            };
            reader.readAsDataURL(file);
        });
    }
  };
});

Detecting changes in AngularJs elements

Answer №1

Similar questions

Extending a Sub-Object in JavaScript

The PHP-generated table is not being appended to the specified div with jQuery

Dots are used to indicate overflow of title in React Material UI CardHeader

Tips for keeping components mounted despite changes in the path

Utilizing *ngfor in Angular 7 to Group and Display Data

Struggles with ajax and JavaScript arise when attempting to tally up grades

Decode my location and input the address before validating it

I am unable to comprehend the function definition

Does the PHP include function act as an HTTP request?

Automatically assigning a default dynamic value to a dropdown option using Vue.js

Show the time in hours and minutes (00:00) while rounding off seconds to the nearest minute

Exploring the wonders of Jasmine coding with jQuery

A helpful guide on passing a component as a prop to a child class and incorporating it within the child component along with additional props

unable to utilize the library three.js

Cypress and VueJS: How to target elements that are dynamically generated following a specific user interaction

Can global scope be injected into a class instantiated in ES6, also known as a singleton?

When an Ajax call is made, my .html page transforms into a .php page using jQuery

Discovering indistinguishable "Feeling Fortunate" inquiries

"Socket io Simplified: Embracing the Power of Drag

The function inputLocalFont.addEventListener does not exist and cannot be executed