0

I want to upload file on server, but in Utility Service there is variable files in for loop is undefined during debug, please check directive is correct or not.

HTML

 <input type="file" accept=".xlsx" file-model/>
 <button ng-click="upload()">upload me</button>

fileModel directive

app.directive('fileModel', function () {
    return {
        restrict: 'A',
        transclude: true,
        link: function($scope, $element) {
          var fileInput = $element.find('input[type="file"]');
          fileInput.bind('change', function(e) {               
            $scope.notReady = e.target.files.length == 0;
            $scope.files = [];
            for (var i in e.target.files) {
              if (typeof e.target.files[i] == 'object')       
                  $scope.files.push(e.target.files[i]);
            }
          });
        }
    };
  });

Controller

 $scope.upload = function() {        
      var uploadUrl =  'someurl';
      UtilityService.upload($scope.files, $scope.user, uploadUrl);
  };

Service

function UtilityService($http, $rootScope) {

      var service = {};
      service.upload=upload;

      function upload(files, user, uploadUrl) {
      var formData = new FormData();
      for (var i in files) {
        formData.append('file_' + i, files[i]);
      }

      formData.append("UserId", user.id);
      formData.append("UserRole", user.roles);

      $http({
          method: 'POST',
          url: config.server +uploadUrl,
          enctype: "multipart/form-data",
          data: formData,
          headers: {
            'Content-Type': undefined,
          },
          transformRequest: angular.identity
        })
        .success(function(data, status, headers, config) {
          service.data = data;

        });
    }
    return service;
  }
Neelabh Singh
  • 2,600
  • 12
  • 51
  • 88
  • You actually have 2 problems. 1 being that CORS is stopping the request, and 2 being that your server is responding with a 500. For your first issue, see http://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin. – tcooc Nov 16 '15 at 22:15
  • Since, your ports differ, your browser is respecting the Cross origin policy, which it should. – kensplanet Nov 16 '15 at 22:16
  • Try running Chrome with the flag **--disable-web-security** which should help you get rid of the Cross origin issue. However, you should set the Access-Control-Allow-Origin to * later. – kensplanet Nov 16 '15 at 22:18
  • @kensplanet thanks for reply, I edited question please check it. During debug files is undefined.. – Neelabh Singh Nov 16 '15 at 22:20

1 Answers1

0

Well, I guess the issue is with this line - var fileInput = $element.find('input[type="file"]');

Not sure why you need to find anything. $element is the actual file input element here.

Modified directive - try this

app.directive('fileModel', function () {
    return {
        restrict: 'A',
        transclude: true,
        link: function($scope, $element) {
          var fileInput = $element;
          fileInput.bind('change', function(e) {               
            $scope.notReady = e.target.files.length == 0;
            $scope.files = [];
            for (var i in e.target.files) {
              if (typeof e.target.files[i] == 'object')       
                  $scope.files.push(e.target.files[i]);
            }
          });
        }
    };
  });
kensplanet
  • 493
  • 8
  • 15