Firing ng-change with fileModel or input type="file"

Is there a way to trigger ng-change when a change occurs with this file directive?

I have implemented a custom file directive for this purpose.

The Directive:

app.directive('ngFileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function() {
                var values = [];
                angular.forEach(element[0].files, function(item) {
                    var value = {
                        // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);
                });
                scope.$apply(function() {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

Any suggestions on how to implement ng-change without utilizing ng-model?

The HTML:

 <input type="file" name="" ng-file-model="uploadThisImage" ng-change="onFileSelect($index)">

Answer №1

Creating a Custom Directive for File Input in AngularJS

This special directive allows the <input type=file> element to seamlessly integrate with the ng-change and ng-form directives.

By default, AngularJS's built-in <input> directive does not support handling <input type=file>. To enable this functionality, a custom directive must be implemented.

<input type="file" files-input ng-model="fileArray"
       ng-change="onFileSelect()" multiple />

The files-input directive is defined as follows:

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

This directive sets up a listener for changes that updates the model with the selected files from the input element.

Check out the DEMO on PLNKR


Interactive Example of files-input Directive

angular.module("app",[]);

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileArray" multiple>
    
    <h2>Selected Files</h2>
    <div ng-repeat="file in fileArray">
      {{file.name}}
    </div>
  </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Programming with a combination of Javascript, Angular, and Prototype to efficiently manage and

I am in a bit of a quandary, as I wish to create a function that will clear all the properties of an object and make it available to all instances of that object. To achieve this, I have added a prototype function called clear(). Here is the code snippet: ...

An effective method for targeting a specific button within a CSS file

I have multiple button tags in my code, but I need to style a specific one using CSS. How can I target this particular button and apply styles only to it while leaving the others unchanged? Do I need to assign the button to a variable and reference that va ...

Unable to assign value to Ref data property in Vue3 due to undefined item

Recently, I've been utilizing Vue3 and Nuxt3 to work on a project. My main task involves extracting the :id parameter from the URL and checking if it matches an ID in a JSON file. If there is a match, I update a reference data point called 'exist ...

How do I set up Firebase functions to trigger onWrite when listening for a specific child just once?

Is there a way to access the child under a different node each time the Firebase onWrite function is triggered? To retrieve this child, you can use the following code: {const saatt = (context.database.ref('kullanicilar/1111/marina1/2021/1saat'). ...

Exploring the effectiveness of React Hook Form using React Testing Library

My Component includes a form that, upon submission, utilizes Apollo's useLazyQuery to fetch data based on the form values. The form in the component is managed by React Hook Forms, with the handleSubmit controlled by RHF. <FormContainer onSubmit= ...

Tips for generating a <div> element with multiple children using a loop

section, I have configured a div element with a class named div class = "postWindow". When it comes to the HTML code, here is an example: <div class = "postWindow"> <div class = "userName">Initial Name</div> <div class = "p ...

Google Maps in Angular is not showing up

My Angular Google Maps implementation seems to be working, but unfortunately, the map is not showing on my website. I have confirmed that my JS is loading the maps and I can retrieve the map properties. Interestingly, when I check the Chrome AngularJS Debu ...

Having trouble shutting down the window using Electron and Socket io

I embarked on a chat application project using NodeJS and Socket.io, everything was running smoothly. However, when I decided to integrate my app into the Electron framework, the chat window opened but I encountered an issue with the close button not func ...

The checkbox that is dynamically added within a jQuerymobile list view is experiencing rendering issues

Having trouble with rendering dynamically added checkboxes inside a jQuerymobile list view. Here is the unordered list I am working with, including a sample list item in the HTML: <ul data-role="listview" id="ul_address_list" > <li data-icon=" ...

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

Take a look at the code I've provided below : HTML : <input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)"> Javascript : <script> $('#sel_44').attr("checked", true); < ...

Troubleshooting the non-functioning addEventListener in JavaScript

I am facing an issue where a function that should be triggered by a click event is not working and the console.log message does not appear <script src="e-com.js" async></script> This is how I included the javascript file in the head ...

Scripting issues detected in Safari and Microsoft Edge browsers

I recently finished developing an AngularJs Application that works flawlessly on Google Chrome and Mozilla Firefox. However, upon testing it on Safari and IE-11, I encountered errors in the console. One particular piece of code that causes issues is used ...

React Native can trigger a press event, as long as it is not within

My situation involves triggering an action when clicking on the parent component (TouchableOpacity, for example), but not triggering anything when clicking on the children components (Screen and others). It's similar to preventing bubbling on the web. ...

When using Observables in AngularFire2, the $ref property does not get captured

Recently, I started working with AngularFire2 (version 4.0.0-rc.1) and encountered a challenge that has me stuck: getWishlist$(): FirebaseListObservable<{}> { return <FirebaseListObservable<{}>>this.store.select(getFirebaseUID) ...

What is the best way to update auto margins after resizing an element with Javascript?

I'm having an issue with a DIV on my webpage that is centered using margin-left and margin-right set to auto. When I try to resize the DIV, it no longer stays centered on the screen. <div id="content" style="margin-left:auto;margin-right:auto;widt ...

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

The expo-location feature is failing to accurately record and store all of the positions within the array

Incorporating expo-location in my react-native app, I utilize it to track the user's positions and store them in a redux object. While debugging the object reveals that all positions have been successfully inserted, upon retrieving this array, it turn ...

A common inquiry: how can one pinpoint a location within an irregular figure?

I have been studying Html5 Canvas for a few weeks now, and the challenge mentioned above has puzzled me for quite some time. An irregular shape could be a circle, rectangle, ellipse, polygon, or a path constructed by various lines and bezier curves... I ...

Update the pageExtensions setting in Next.js to exclude building pages with the file extension *.dev.*

I am currently working on a project using Next.js version v12.3, and I have encountered an issue related to excluding page files with a *.dev.* extension from the build process. In my configuration file next.config.js, I have configured the pageExtensions ...

Attempt the axios request again if the response is null or missing

await axios .post( executeBatch, { headers: { "Content-Type": "application/json", "x-access-token": localStorage.getItem("token"), }, } ) .then( ...