загрузки файлов в angularjs

Question

Я новичок в angularjs и пытаюсь реализовать простую загрузку файла, но я fetting файл, как определено при попытке получить к нему доступ из контроллера

articles.html

<section data-ng-controller="ArticlesController" data-ng-init="find()"> 
    <div class="page-header"> 
    </div> 
    <div > 
     <input type="file" file-model="myFile"/> 
     <button ng-click="uploadFile()">upload me</button> 
    </div> 
</section> 

Ниже мои контроллер, где я пытаюсь получить доступ к объекту файловой

angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location','Authentication', 'Articles', 
    function($scope, $stateParams, $location, Authentication, Articles) { 
     $scope.authentication = Authentication; 

     $scope.uploadFile = function() { 
      console.log('came here'); 
      var file = $scope.myFile; 
     console.log('file is ' + file); 

     }; 
} 
]); 

Edit:

Я пробовал использовать https://github.com/ghostbar/angular-file-model и работал на кодовой табличке котла Meanjs

Одним из шагов является включение углового файла-model.js в html-страницу. Добавить в HTML-файлы:

в какой файл я должен включать и как включить файл углового файла-model.js.

Answer 1

Это не такой простой в использовании файл Input with Angular. Вы должны использовать внешние библиотеки как те, которые указаны here.

Я лично использовал BlueImp FileUpload: https://blueimp.github.io/jQuery-File-Upload/angularjs.html

Answer 2

Кажется, вы используете Angular-file-Model

Они также имеют Plunker, и это работает прекрасно. Вы следовали всем шагам, которые они упомянули в git? Проверьте, если вы вводили файл-модель зависимости в основном модуле, как:

angular.module('articles', ['file-model']); 

Answer 3

я использовал Даниал Фарид Углового Upload File несколько раз и имел большой успех.

https://github.com/danialfarid/angular-file-upload

Answer 4

angular.module('myApp').directive('fileModel', ['$window',function ($window) { 
    return { 
     restrict: 'A', 
     require:'ngModel', 
     link: function(scope, element, attrs,ngModel) { 
      element.bind('change', function(){ 
       scope.$apply(function(){ 
        var r = new FileReader(); 
        r.onloadend = function(){ 
         var svg = r.result; 
         ngModel.$setViewValue($window.btoa(svg)); 
        ngModel.$render(); 
        }; 
        var file = element[0].files[0]; 
        if(file !== undefined){ 
         if(file.type === 'image/svg+xml' || file.type === 'image/svg'){ 
          ngModel.$setValidity('svgimage', true); 
          r.readAsDataURL(file); 

         }else{ 
          ngModel.$setValidity('svgimage', false); 
          ngModel.$setViewValue(' '); 
          ngModel.$render(); 

         } 
       var value = element[0].value ; 
          value = value.substr(value.lastIndexOf('\\') + 1,value.length); 
          document.getElementById('fileurl').value = value; 
          document.getElementById('fileurl').title = value; 
        } 

      }); 
      }); 
     } 
    }; 
}]); 

<input ng-model="icon.icon" file-model class="form-control upload" type="file" required/>