Search code examples
javascriptangularjsangularjs-directiveangularjs-service

How to update an AngularJS service based on uploaded file?


When the browser loads my webapp, the following constant is also loaded.

var v1_module = angular.module('v1_module', []);

v1_module.constant('v1_data', {
   params: [
      {
         name: "foo",
         items: [
            {
               name: "item 1",
               checked: false
            },
            {
               name: "item 2",
               checked: false
            }
         ]
      },
      {
         name: "bar",
         items: [
            {
               name: "item 3",
               checked: false
            },
            {
               name: "item 4",
               checked: false
            }
         ]
      }
   ]
});

The user can change it's value through a interface, let's say he changes the checked value of the first item to true using a checkbox, and then he must be able to save the content of v1_data to a .txt file. This .txt file can later be imported to the app in order to update v1_data and change the interface accordingly (in the example above, the check box of the first item must be checked). I realize that I shouldn't use a constant, because I can't change it's value. I've also tried to use value instead, but without success. Is it possible to accomplish this? Which service should I use? I'm getting the uploaded file and trying to update v1_data like the following. Is it wrong?

function getInputFile(files)
{    
   var reader = new FileReader();

   reader.readAsText(files[0]);

   reader.onload = function()
   {
      var input_file  = JSON.parse(reader.result);
      var v1_data     = input_file[0].data;

      v1_module.value('v1_data', v1_data);
   }
}

Solution

  • not sure what you've got going on here but you should be getting the file after the module is booted via service:

    angular.module('myApp',[]).service('getTextFile',function($q){
       this.getInputFile = function(files){
       var defer = $q.defer();  
       var reader = new FileReader();
    
       reader.readAsText(files[0]);
    
       reader.onload = function()
       {
          var input_file  = JSON.parse(reader.result);
          var v1_data     = input_file[0].data;
    
          defer.resolve(v1_data);
       }
       return defer.promise;
       }
    }).run(function(getTextFile,$rootScope){
        getTextFile.getInputFile().then(function(file){
           $rootScope.file = file;
        });
    });