Eu tentei usar o ng-model na tag de entrada com o tipo file:

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

Mas depois de selecionar um arquivo, no controlador, $ scope.vm.uploadme ainda está indefinido.

Como obtenho o arquivo selecionado no meu controlador?

Eu criei uma solução alternativa com diretiva:

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

E a tag de entrada se torna:

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

Ou, se apenas a definição do arquivo for necessária:

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

Eu uso esta diretiva:

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 invoque-o assim:

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

A propriedade (editItem.editItem._attachments_uri.image) será preenchida com o conteúdo do arquivo que você selecionar como uri de dados (!).

Observe que este script não carregará nada. Ele somente preencherá seu modelo com o conteúdo do seu arquivo codificado e um data-uri (base64).

Confira uma demonstração de trabalho aqui: http://plnkr.co/CMiHKv2BEidM9SShm9Vv

Como habilitar <input type="file">para trabalhar comng-model

Demonstração de trabalho da diretiva que funciona com ng-model

A ng-modeldiretiva principal não funciona <input type="file">imediatamente.

Esta directiva personalizado permite ng-modele tem a vantagem adicional de permitir que os ng-change, ng-requirede ng-formdirectivas para trabalhar com <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>

Este é um adendo à solução do @ endy-tjahjono.

Acabei não conseguindo obter o valor de uploadme do escopo. Mesmo que uploadme no HTML tenha sido visivelmente atualizado pela diretiva, eu ainda não consegui acessar seu valor com $ scope.uploadme. Eu era capaz de definir seu valor do escopo, no entanto. Misterioso, certo ..?

Como se viu, um escopo filho foi criado pela diretiva e o escopo filho teve seu próprio uploadme .

A solução foi usar um objeto em vez de um primitivo para armazenar o valor de uploadme .

No controlador eu tenho:

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

e no HTML:

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

Não há alterações na diretiva.

Agora, tudo funciona como o esperado. Posso pegar o valor de uploadme.src do meu controlador usando $ scope.uploadme.

Oi pessoal, eu crio uma diretiva e registrei no caramanchão.

essa lib o ajudará a modelar o arquivo de entrada, não apenas retornará dados do arquivo, mas também o dataurl do arquivo ou a 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/

A esperança o ajudará

Esta é uma versão ligeiramente modificada que permite especificar o nome do atributo no escopo, assim como você faria com o ng-model, use:

    <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 entrada de vários arquivos usando lodash ou sublinhado:

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

Eu tive que fazer o mesmo em várias entradas, então atualizei o método @Endy Tjahjono. Retorna uma matriz contendo todos os arquivos lidos.

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

      }
    }
  });

Eu tive que modificar a diretiva de Endy para obter Last Modified, lastModifiedDate, nome, tamanho, tipo e dados, além de poder obter uma matriz de arquivos. Para aqueles de vocês que precisavam desses recursos extras, aqui está.

ATUALIZAÇÃO: Encontrei um bug no qual, se você selecionar o (s) arquivo (s) e depois selecionar novamente, mas cancelar, os arquivos nunca serão desmarcados como parece. Então atualizei meu código para corrigir isso.

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

            }
        }
    });

Se você quiser algo um pouco mais elegante / integrado, use um decorador para estender a inputdiretiva com suporte type=file. A principal ressalva a ser lembrada é que esse método não funcionará no IE9, pois o IE9 não implementou a API de arquivos . O uso de JavaScript para fazer upload de dados binários, independentemente do tipo via XHR, simplesmente não é possível nativamente no IE9 ou anterior (uso deActiveXObject para acessar o sistema de arquivos local não conta, pois o uso do ActiveX está apenas solicitando problemas de segurança).

Esse método exato também requer o AngularJS 1.4.x ou posterior, mas você pode adaptá-lo para usá-lo em $provide.decoratorvez de angular.Module.decorator- escrevi essa essência para demonstrar como fazê-lo, em conformidade com o guia de estilo do John Papa no AngularJS :

(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 que isso não foi feito em primeiro lugar? O suporte ao AngularJS deve atingir apenas o IE9. Se você não concorda com essa decisão e acha que eles deveriam simplesmente colocar isso de qualquer maneira, vá para o Angular 2+, pois melhor suporte moderno é literalmente o motivo pelo qual o Angular 2 existe.

O problema é (como mencionado anteriormente) que, sem o suporte da API do arquivo, fazer isso corretamente é inviável para o núcleo, dado que nossa linha de base é o IE9 e o preenchimento de polifill está fora de questão.

Além disso, tentar lidar com essa entrada de uma maneira que não seja compatível com vários navegadores apenas dificulta as soluções de terceiros, que agora precisam combater / desativar / solucionar a solução principal.

...

Eu vou fechar isso assim que fechamos o # 1236. O Angular 2 está sendo construído para oferecer suporte a navegadores modernos e com esse suporte a arquivos estará facilmente disponível.

Tente isso, isso está funcionando para mim em 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);