AngularJS: Image upload + FileReader preview. Trouble binding between controller, directive and scope

Question

I'm relatively new to Angular and are stilling trying to wrap my head around all it's magic and scoping.

I'm trying to do a simple image upload with preview script and I'm missing the final piece.

I have managed to do each task (the upload and the preview) separately but I'm stuck with piecing it together.

This is my code so far:

Javascript

angular.module('fileUpload', [])
  .controller("upload", ['$scope', '$http', function($scope, $http) {
    $scope.$watch('file', function(file) {
      console.log("arguments", file);
    // Upload file via $http, formdata & transformRequest
    });
  }])
  .directive("fileinput", [function() {
    return {
      scope: {
        fileinput: "="
      },
      link: function(scope, element, attributes) {
        element.bind("change", function(changeEvent) {
          scope.fileinput = changeEvent.target.files[0]; // Trigger $watch in controller

          var reader = new FileReader();
          reader.onload = function(loadEvent) {
            scope.$apply(function() {
              // Should add the base64 for my filepreview variable
              scope.filepreview = loadEvent.target.result;
            });
          }
          reader.readAsDataURL(scope.fileinput);
        });
      }
    }
  }]);

HTML

<input type="file" fileinput="file" />
<img ng-src="{{filepreview}}" class="image"/>

So, as you might see, I'm binding the fileinput in the directive to the $scope.file in the controller. It works. When a change in the file input is triggered, the file variable in the controller is obtaining the correct data for me to send it and upload it. My problem right now is, that I'm using the fileinput in the directive to call the FileReader, run the readAsDataURL and then listen to when that's done, apply it to the scope and here I stop. I want to update the variable filepreview so it will be updated in the template (see HTML and IMG) but I simply cannot figure out how to connect the two. The filepreview should not be saved and is only to show to the user what image they just selected.

So, essentially, I want to bind the scope.filepreview with the filepreview from e.g. the controller.

How would I go about doing that?

Thanks

gmuraleekrishna · Accepted Answer · 2016-03-21 17:11:07Z

2

fileinput directive uses Isolated scope, it needs to be changed to either Inherited scope or pass filepreview as an attribute

With Isolated scope usage:

  <input type="file" fileinput="file" filepreview="filepreview"/>

Directive isolated scope:

scope: {
        fileinput: "="
        filepreview: "="
      },

Set the filepreview inside directive

scope.filepreview = loadEvent.target.result;

edited Mar 21, 2016 at 17:11

gmuraleekrishna

3,4311 gold badge29 silver badges46 bronze badges

answered Mar 21, 2016 at 16:53

rupampatel

3002 silver badges11 bronze badges

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

1 Comment

Emil Devantie Brockdorff Over a year ago

Wauw it was that simple. I had been hovering around a solution near what you've proposed but instead of making a new scope on the file input I tried to bind fileinputtwice to two different directive scopes. Thank you so much :-)

Collectives™ on Stack Overflow

AngularJS: Image upload + FileReader preview. Trouble binding between controller, directive and scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related