Soy nuevo en angular. Estoy tratando de leer la ruta del archivo cargado desde el campo 'archivo' HTML cada vez que ocurre un 'cambio' en este campo. Si uso 'onChange' funciona, pero cuando lo uso de forma angular usando 'ng-change' no funciona.

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged () nunca llama. Firebug tampoco muestra ningún error.

No hay soporte vinculante para el control de carga de archivos

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

en vez de

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

puedes intentar

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

Nota: esto requiere que la aplicación angular esté siempre en modo de depuración . Esto no funcionará en el código de producción si el modo de depuración está deshabilitado.

y en su función cambia en lugar de

$scope.fileNameChanged = function() {
   alert("select file");
}

puedes intentar

$scope.fileNameChanged = function() {
  console.log("select file");
}

A continuación se muestra un ejemplo práctico de carga de archivos con la carga de archivos de arrastrar y soltar. Http://jsfiddle.net/danielzen/utp7j/

Información de carga de archivos angular

URL para la carga de archivos AngularJS en ASP.Net

http://cgeers.com/2013/05/03/angularjs-file-upload/

Subida de archivos múltiples nativos de AngularJs con progreso con NodeJS

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload: un servicio de AngularJS para cargar archivos usando iframe

http://ngmodules.org/modules/ngUpload

Hice una pequeña directiva para escuchar los cambios de entrada de archivos.

Ver JSFiddle

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});     

directive.js:

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

Este es un refinamiento de algunos de los otros, los datos terminarán en un modelo ng, que normalmente es lo que desea.

Marcado (solo cree un archivo de datos de atributos para que la directiva pueda encontrarlo)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

JS

app.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };
});

La manera limpia es escribir su propia directiva para enlazar al evento "change". Solo para hacerle saber que IE9 no es compatible con FormData, por lo que realmente no puede obtener el objeto de archivo del evento de cambio.

Puede usar la biblioteca ng-file-upload que ya es compatible con IE con FileAPI polyfill y simplificar la publicación del archivo en el servidor. Utiliza una directiva para lograr esto.

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

He ampliado la idea de @Stuart Axon de agregar un enlace bidireccional para la entrada del archivo (es decir, permitir restablecer la entrada restableciendo el valor del modelo a nulo):

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

Manifestación

Similar a algunas de las otras buenas respuestas aquí, escribí una directiva para resolver este problema, pero esta implementación refleja más de cerca la forma angular de adjuntar eventos.

Puede usar la directiva de esta manera:

HTML

<input type="file" file-change="yourHandler($event, files)" />

Como puede ver, puede inyectar los archivos seleccionados en su controlador de eventos, como inyectaría un objeto $ event en cualquier controlador de eventos ng.

Javascript

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        // Get the function provided in the file-change attribute.
        // Note the attribute has become an angular expression,
        // which is what we are parsing. The provided handler is 
        // wrapped up in an outer function (attrHandler) - we'll 
        // call the provided event handler inside the handler()
        // function below.
        var attrHandler = $parse(attrs['fileChange']);

        // This is a wrapper handler which will be attached to the
        // HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            // Execute the provided handler in the directive's scope.
            // The files variable will be available for consumption
            // by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        // Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

Esta directiva también pasa los archivos seleccionados:

/**
 *File Input - custom call when the file has changed
 */
.directive('onFileChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.onFileChange);

      element.bind('change', function() {
        scope.$apply(function() {
          var files = element[0].files;
          if (files) {
            onChangeHandler(files);
          }
        });
      });

    }
  };
});

El HTML, cómo usarlo:

<input type="file" ng-model="file" on-file-change="onFilesSelected">

En mi controlador:

$scope.onFilesSelected = function(files) {
     console.log("files - " + files);
};

Recomiendo crear una directiva

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

Esta directiva se puede usar muchas veces, usa su propio alcance y no depende del alcance principal. También puede dar algunos parámetros a la función del controlador. La función del controlador se llamará con el objeto de alcance, que estaba activo cuando cambió la entrada. $ apply actualiza su modelo cada vez que se llama al evento de cambio

La versión angular más simple de jqLite.

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

Demostración de trabajo de la directiva de "entrada de archivos" que funciona con ng-change¹

Para hacer que un <input type=file>elemento funcione con la directiva ng-change , necesita una directiva personalizada que funcione con la directiva ng-model .

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

La DEMO

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);
      })
    }
  }
})

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileList" 
           ng-change="onInputChange()" multiple />
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

Solución demasiado completa basada en:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

Una manera simple de ocultar el campo de entrada y reemplazarlo con una imagen, aquí después de una solución, que también requiere un corte angular pero que hace el trabajo [TriggerEvent no funciona como se esperaba]

La solución:

• coloque el campo de entrada en la pantalla: ninguno [el campo de entrada existe en el DOM pero no está visible]
• coloque su imagen justo después En la imagen, use nb-click () para activar un método

Cuando se hace clic en la imagen, simule una acción DOM 'clic' en el campo de entrada. Et voilà!

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };

Lo he hecho así;

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

// self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

Otra forma interesante de escuchar los cambios de entrada del archivo es vigilando el atributo ng-model del archivo de entrada. Por supuesto, FileModel es una directiva personalizada.

Me gusta esto:

HTML -> <input type="file" file-model="change.fnEvidence">

Código JS ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

Espero que pueda ayudar a alguien.

Los elementos angulares (como el elemento raíz de una directiva) son objetos jQuery [Lite]. Esto significa que podemos registrar el escucha de eventos de esta manera:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

Esta es la delegación de eventos jQuery. Aquí, el oyente está conectado al elemento raíz de la directiva. Cuando se activa el evento, se elevará al elemento registrado y jQuery determinará si el evento se originó en un elemento interno que coincida con el selector definido. Si lo hace, el controlador disparará.

Los beneficios de este método son:

• el controlador está vinculado al elemento $ que se limpiará automáticamente cuando se destruya el alcance de la directiva.
• sin código en la plantilla
• funcionará incluso si el delegado de destino (entrada) aún no se ha procesado cuando registra el controlador de eventos (como cuando se usa ng-ifo ng-switch)

http://api.jquery.com/on/

Simplemente puede agregar el siguiente código en onchange y detectará el cambio. puede escribir una función con X clic o algo para eliminar los datos del archivo.

document.getElementById(id).value = "";