AngularJS read JSON from user upload

Question

I would like to allow user upload a JSON file and assign the content of the JSON file to a $scope variable.

After the content of the file is been assigned to the scope variable, I want to totally discard the file itself and not storing it anywhere.

How to efficiently implement this function?

Have you tried anything so far? Do you have any code involving the import of the JSON file and you're just looking for help parsing the file into your scope variable? Because it seems like you have things planned out well so I don't know what you're looking for here. How to ask a question on Stack Overflow — Dresden
– Dresden, Commented May 4, 2016 at 22:55

timehat · Accepted Answer · 2016-05-04 23:04:10Z

1

In your template:

<input type="file" onchange="angular.element(this).scope().onFileChange(this)">

In your JS:

$scope.onFileChange = function (fileEl) {
  var files = fileEl.files;
  var file = files[0];
  var reader = new FileReader();

  reader.onloadend = function(evt) {
    if (evt.target.readyState === FileReader.DONE) {
      $scope.$apply(function () {
        $scope.something = JSON.parse(evt.target.result);
      });
    }
  };

  reader.readAsText(file);
};

"onchange" instead of "ng-change", because it looks like Angular doesn't support binding things with ng-change on file upload input controls.

This was stolen almost verbatim from a co-worker's code. It might be Chrome-specific. If someone who knows me sees this, all credit is due to this coworker. And it's all due to him in any event anyhow. ;)

answered May 4, 2016 at 23:04

timehat

1356 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

timehat Over a year ago

The file is never transferred over the web nor stored anywhere in this example.

Kyle Over a year ago

Correct. Input type file doesn't support ngModel.

timehat Over a year ago

If you happen to turn off the debug info in Angular (see docs.angularjs.org/guide/production), the ".scope()" in that onchange request won't work. But few people seem do that (in our app we saw pretty much no change in perf and it just made on the fly debugging more difficult--so we left it on).

Collectives™ on Stack Overflow

AngularJS read JSON from user upload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related