Problems with uploading a file and parsing with AngularJS

Question

Trying to build a simple application that allows a user to upload a file, and upon clicking the 'add' button, It parses the file and displays the result within the browser.

I am using IntelliJ to generate the AngularJS application stub, and modifying it accordingly.

My attempt is below:

view1.html

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../app.css">
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
    <script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
    <!--<script src="view1.js"></script>-->
</head>

<body>
    <div ng-controller="View1Ctrl">
        <input type="file" id="file" name="file"/>
        <br/>
        <button ng-click="add()">Add</button>
        <p>{{data}}</p>
    </div>
</body>

</html>

view1.js

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.data = 'none';
    $scope.add = function() {
        var f = document.getElementById('file').files[0],
            r = new FileReader();
        r.onloadend = function(e) {
            $scope.data = e.target.result;
        }
        r.readAsArrayBuffer(f);
    }

}]);

view1_test.js

'use strict';

describe('myApp.view1 module', function() {

  beforeEach(module('myApp.view1'));

  describe('view1 controller', function(){

    it('should ....', inject(function($controller, $rootScope) {
      //spec body
      // var view1Ctrl = $controller('View1Ctrl');
      var $scope = $rootScope.$new(),
          ctrl = $controller('View1Ctrl', {
            $scope: $scope
            // $User: {}
          });
      expect(ctrl).toBeDefined();
    }));

  });
});

app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

I am not sure where I could potentially be going wrong? I viewed quite a few questions to this and tried multiple different approaches but I cannot get this to work despite all of my tests passing.

Your `view1_test.js` isn't testing anything related to the file upload. — Daniel Lizik, Mar 21 '16 at 22:04

score 0 · Accepted Answer · answered Mar 23 '16 at 20:24

The issue was around my view1.js file. I found the Papa Parse library extremely useful.

Here is my solution used from the open source Papa Parse community:

Papa.parse(fileInput[0], {
   complete: function(results) {
      console.log("Complete!", results.data);
      $.each(results.data, function(i, el) {
          var row = $("<tr/>");
          row.append($("<td/>").text(i));
          $.each(el, function(j, cell) {
               if (cell !== "")
                   row.append($("<td/>").text(cell));
          });
          $("#results tbody").append(row);
       });
    }
});

Please refer to this and guide http://stackoverflow.com/questions/41586724/angular-and-papaparse-integration — Asad Ali Khan, Jan 11 '17 at 09:47

Problems with uploading a file and parsing with AngularJS

1 Answers1