Update image on input src change angularjs

Question

I'm trying to show a photo when someone selects it for an input. Now I might be over simplyfying angularjs too much but I was hoping that this code would work.

    <div ng-app="app">

    ... html stuff ...

    <div ng-controller="imgCtrl">

    <input ng-model="imageSource" type="file"></input>   
    <img ng-src="{|imageSource|}"></img>

    </div>

    </div> end of app

Where my angularjs file is as follows

var app = angular.module('app',[]).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    }
);

var imgCtrl = function ($scope,$http){
    $scope.wall = _wall;
};

clientDashboard.controller('imgCtrl',imgCtrl);

Unfortunately, nothing is happening and I can't see my updated image. Do I really have to write boiler plate code for this?

I'm using a templating system called twig that comes with my php framework. I needed to change the markup. — Dr.Knowitall
– Dr.Knowitall, Commented Oct 17, 2013 at 23:07

Ronnie · Accepted Answer · 2013-10-17 23:36:13Z

2

I got it working in chrome and firefox but my quick research shows that it is a security risk and may not even be allowed eventually. See here: http://jsfiddle.net/28ZJw/

HTML:

<div ng-app="app">
  <div ng-controller="imgCtrl">
    <input ng-model="imageSource" type="file" onchange="angular.element(this).scope().fileNameChaged(this)"></input>
    <img ng-src="{|imageSource|}"></img>
  </div>
</div>

JS:

var app = angular.module('app',[]).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    }
);

app.controller('imgCtrl', function($scope, $http)
{
    $scope.imageSource = "";
    $scope.fileNameChaged = function(element)
    {
        var reader = new FileReader();
        reader.onload = function(e)
        {
            $scope.$apply(function()
            {
                $scope.imageSource = e.target.result;
            });
        }
        reader.readAsDataURL(element.files[0]);
    }
});

The right way would be to get this going with ng-change however I couldn't get it to work. I am not sure if ng-change applies to file input fields

answered Oct 17, 2013 at 23:36

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

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

4 Comments

Dr.Knowitall Over a year ago

Ya I tried doing it with ng-change as well. Technically you're suppose to 'invent' your own directive to handle this. Unfortunately that takes time and effort that I don't even want to deal with, considering I've been working on this project long enough and just started learning Angular. Thanks for the help!

Ronnie Over a year ago

yeah I would turn it into a directive for sure. I just started making little widgets using directives yesterday so I am not confident enough to make that a directive yet. I'm new too

jaime Over a year ago

here's a directive that might be useful stackoverflow.com/questions/17063000/…

Ronnie Over a year ago

there ya go, that is slick

Collectives™ on Stack Overflow

Update image on input src change angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related