Traté de usar ng-model en la etiqueta de entrada con el archivo de tipo:

<input type="file" ng-model="vm.uploadme" />

Pero después de seleccionar un archivo, en el controlador, $ scope.vm.uploadme aún no está definido.

¿Cómo obtengo el archivo seleccionado en mi controlador?

Creé una solución alternativa con la directiva:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

Y la etiqueta de entrada se convierte en:

<input type="file" fileread="vm.uploadme" />

O si solo se necesita la definición del archivo:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            });
        }
    }
}]);

Yo uso esta directiva:

angular.module('appFilereader', []).directive('appFilereader', function($q) {
    var slice = Array.prototype.slice;

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
                if (!ngModel) return;

                ngModel.$render = function() {};

                element.bind('change', function(e) {
                    var element = e.target;

                    $q.all(slice.call(element.files, 0).map(readFile))
                        .then(function(values) {
                            if (element.multiple) ngModel.$setViewValue(values);
                            else ngModel.$setViewValue(values.length ? values[0] : null);
                        });

                    function readFile(file) {
                        var deferred = $q.defer();

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            deferred.resolve(e.target.result);
                        };
                        reader.onerror = function(e) {
                            deferred.reject(e);
                        };
                        reader.readAsDataURL(file);

                        return deferred.promise;
                    }

                }); //change

            } //link
    }; //return
});

e invocarlo así:

<input type="file" ng-model="editItem._attachments_uri.image" accept="image/*" app-filereader />

La propiedad (editItem.editItem._attachments_uri.image) se completará con el contenido del archivo que seleccione como data-uri (!).

Tenga en cuenta que este script no cargará nada. Solo llenará su modelo con el contenido de su archivo codificado y un data-uri (base64).

Vea una demostración funcional aquí: http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Cómo habilitar <input type="file">para trabajar conng-model

Demostración de trabajo de la directiva que funciona con ng-model

La ng-modeldirectiva principal no funciona <input type="file">fuera de la caja.

Esta directiva permite a medida ng-modely tiene la ventaja adicional de permitir las ng-change, ng-requiredy ng-formlas directivas de trabajo con <input type="file">.

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

angular.module("app").directive("selectNgFiles", 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" select-ng-files ng-model="fileArray" multiple>

    <code><table ng-show="fileArray.length">
    <tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
    <tr ng-repeat="file in fileArray">
      <td>{{file.name}}</td>
      <td>{{file.lastModified | date  : 'MMMdd,yyyy'}}</td>
      <td>{{file.size}}</td>
      <td>{{file.type}}</td>
    </tr>
    </table></code>
    
  </body>

Esta es una adición a la solución de @ endy-tjahjono.

Terminé no pudiendo obtener el valor de uploadme desde el alcance. Aunque uploadme en el HTML fue visiblemente actualizado por la directiva, todavía no podía acceder a su valor por $ scope.uploadme. Sin embargo, pude establecer su valor desde el alcance. Misterioso, ¿verdad ..?

Al final resultó que, la directiva creó un ámbito secundario, y el ámbito secundario tenía su propio uploadme .

La solución fue utilizar un objeto en lugar de un primitivo para mantener el valor de uploadme .

En el controlador tengo:

$scope.uploadme = {};
$scope.uploadme.src = "";

y en el HTML:

 <input type="file" fileread="uploadme.src"/>
 <input type="text" ng-model="uploadme.src"/>

No hay cambios en la directiva.

Ahora, todo funciona como se esperaba. Puedo obtener el valor de uploadme.src de mi controlador usando $ scope.uploadme.

Hola chicos, creo una directiva y me registré en Bower.

Esta biblioteca lo ayudará a modelar el archivo de entrada, no solo devolver los datos del archivo, sino también el archivo dataurl o base 64.

{
    "lastModified": 1438583972000,
    "lastModifiedDate": "2015-08-03T06:39:32.000Z",
    "name": "gitignore_global.txt",
    "size": 236,
    "type": "text/plain",
    "data": "data:text/plain;base64,DQojaWdub3JlIHRodW1ibmFpbHMgY3JlYXRlZCBieSB3aW5kb3dz…xoDQoqLmJhaw0KKi5jYWNoZQ0KKi5pbGsNCioubG9nDQoqLmRsbA0KKi5saWINCiouc2JyDQo="
}

https://github.com/mistralworks/ng-file-model/

La esperanza te ayudará

Esta es una versión ligeramente modificada que le permite especificar el nombre del atributo en el ámbito, tal como lo haría con ng-model, uso:

    <myUpload key="file"></myUpload>

Directiva:

.directive('myUpload', function() {
    return {
        link: function postLink(scope, element, attrs) {
            element.find("input").bind("change", function(changeEvent) {                        
                var reader = new FileReader();
                reader.onload = function(loadEvent) {
                    scope.$apply(function() {
                        scope[attrs.key] = loadEvent.target.result;                                
                    });
                }
                if (typeof(changeEvent.target.files[0]) === 'object') {
                    reader.readAsDataURL(changeEvent.target.files[0]);
                };
            });

        },
        controller: 'FileUploadCtrl',
        template:
                '<span class="btn btn-success fileinput-button">' +
                '<i class="glyphicon glyphicon-plus"></i>' +
                '<span>Replace Image</span>' +
                '<input type="file" accept="image/*" name="files[]" multiple="">' +
                '</span>',
        restrict: 'E'

    };
});

Para la entrada de múltiples archivos usando lodash o guión bajo:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                return _.map(changeEvent.target.files, function(file){
                  scope.fileread = [];
                  var reader = new FileReader();
                  reader.onload = function (loadEvent) {
                      scope.$apply(function () {
                          scope.fileread.push(loadEvent.target.result);
                      });
                  }
                  reader.readAsDataURL(file);
                });
            });
        }
    }
}]);

function filesModelDirective(){
  return {
    controller: function($parse, $element, $attrs, $scope){
      var exp = $parse($attrs.filesModel);
      $element.on('change', function(){
        exp.assign($scope, this.files[0]);
        $scope.$apply();
      });
    }
  };
}
app.directive('filesModel', filesModelDirective);

Tenía que hacer lo mismo en múltiples entradas, así que actualicé el método @Endy Tjahjono. Devuelve una matriz que contiene todos los archivos leídos.

  .directive("fileread", function () {
    return {
      scope: {
        fileread: "="
      },
      link: function (scope, element, attributes) {
        element.bind("change", function (changeEvent) {
          var readers = [] ,
              files = changeEvent.target.files ,
              datas = [] ;
          for ( var i = 0 ; i < files.length ; i++ ) {
            readers[ i ] = new FileReader();
            readers[ i ].onload = function (loadEvent) {
              datas.push( loadEvent.target.result );
              if ( datas.length === files.length ){
                scope.$apply(function () {
                  scope.fileread = datas;
                });
              }
            }
            readers[ i ].readAsDataURL( files[i] );
          }
        });

      }
    }
  });

Tuve que modificar la directiva de Endy para poder obtener Last Modified, lastModifiedDate, nombre, tamaño, tipo y datos, así como poder obtener una matriz de archivos. Para aquellos de ustedes que necesitaban estas características adicionales, aquí están.

ACTUALIZACIÓN: Encontré un error en el que si selecciona los archivos y luego vuelve a seleccionar, pero cancela, los archivos nunca se deseleccionan como parece. Así que actualicé mi código para arreglar eso.

 .directive("fileread", function () {
        return {
            scope: {
                fileread: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var readers = [] ,
                        files = changeEvent.target.files ,
                        datas = [] ;
                    if(!files.length){
                        scope.$apply(function () {
                            scope.fileread = [];
                        });
                        return;
                    }
                    for ( var i = 0 ; i < files.length ; i++ ) {
                        readers[ i ] = new FileReader();
                        readers[ i ].index = i;
                        readers[ i ].onload = function (loadEvent) {
                            var index = loadEvent.target.index;
                            datas.push({
                                lastModified: files[index].lastModified,
                                lastModifiedDate: files[index].lastModifiedDate,
                                name: files[index].name,
                                size: files[index].size,
                                type: files[index].type,
                                data: loadEvent.target.result
                            });
                            if ( datas.length === files.length ){
                                scope.$apply(function () {
                                    scope.fileread = datas;
                                });
                            }
                        };
                        readers[ i ].readAsDataURL( files[i] );
                    }
                });

            }
        }
    });

Si desea algo un poco más elegante / integrado, puede usar un decorador para ampliar la inputdirectiva con soporte type=file. La advertencia principal a tener en cuenta es que este método no funcionará en IE9 ya que IE9 no implementó la API de archivos . El uso de JavaScript para cargar datos binarios independientemente del tipo a través de XHR simplemente no es posible de forma nativa en IE9 o versiones anteriores (el uso ActiveXObjectpara acceder al sistema de archivos local no cuenta, ya que el uso de ActiveX solo requiere problemas de seguridad).

Este método exacto también requiere AngularJS 1.4.xo posterior, pero es posible que pueda adaptar esto para usarlo en $provide.decoratorlugar de angular.Module.decorator: Escribí esta esencia para demostrar cómo hacerlo mientras se ajusta a la guía de estilo AngularJS de John Papa :

(function() {
    'use strict';

    /**
    * @ngdoc input
    * @name input[file]
    *
    * @description
    * Adds very basic support for ngModel to `input[type=file]` fields.
    *
    * Requires AngularJS 1.4.x or later. Does not support Internet Explorer 9 - the browser's
    * implementation of `HTMLInputElement` must have a `files` property for file inputs.
    *
    * @param {string} ngModel
    *  Assignable AngularJS expression to data-bind to. The data-bound object will be an instance
    *  of {@link https://developer.mozilla.org/en-US/docs/Web/API/FileList `FileList`}.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} ngChange
    *  AngularJS expression to be executed when input changes due to user interaction with the
    *  input element.
    */
    angular
        .module('yourModuleNameHere')
        .decorator('inputDirective', myInputFileDecorator);

    myInputFileDecorator.$inject = ['$delegate', '$browser', '$sniffer', '$filter', '$parse'];
    function myInputFileDecorator($delegate, $browser, $sniffer, $filter, $parse) {
        var inputDirective = $delegate[0],
            preLink = inputDirective.link.pre;

        inputDirective.link.pre = function (scope, element, attr, ctrl) {
            if (ctrl[0]) {
                if (angular.lowercase(attr.type) === 'file') {
                    fileInputType(
                        scope, element, attr, ctrl[0], $sniffer, $browser, $filter, $parse);
                } else {
                    preLink.apply(this, arguments);
                }
            }
        };

        return $delegate;
    }

    function fileInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
        element.on('change', function (ev) {
            if (angular.isDefined(element[0].files)) {
                ctrl.$setViewValue(element[0].files, ev && ev.type);
            }
        })

        ctrl.$isEmpty = function (value) {
            return !value || value.length === 0;
        };
    }
})();

¿Por qué no se hizo esto en primer lugar? El soporte de AngularJS está destinado a llegar tan atrás como IE9. Si no está de acuerdo con esta decisión y cree que deberían haberlo puesto de todos modos, salte al carro a Angular 2+ porque un mejor soporte moderno es, literalmente, por qué existe Angular 2.

El problema es (como se mencionó anteriormente) que sin el soporte de la API de archivos, hacer esto correctamente no es factible para el núcleo dado que nuestra línea de base es IE9 y el relleno múltiple de este material está fuera de cuestión para el núcleo.

Además, tratar de manejar esta entrada de una manera que no sea compatible con navegadores cruzados solo hace que sea más difícil para las soluciones de terceros, que ahora tienen que luchar / deshabilitar / solucionar la solución central.

...

Voy a cerrar esto justo cuando cerramos # 1236. Angular 2 se está creando para admitir navegadores modernos y con ese soporte de archivos estará fácilmente disponible.

Prueba esto, esto me está funcionando en JS angular

    let fileToUpload = `${documentLocation}/${documentType}.pdf`;
    let absoluteFilePath = path.resolve(__dirname, fileToUpload);
    console.log(`Uploading document ${absoluteFilePath}`);
    element.all(by.css("input[type='file']")).sendKeys(absoluteFilePath);