Angular: Empty Fiddle

http://angularjs.org/

by hardik_mansaraa

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">

<img class="thumb" ng-src="{{step}}" />
    
    <input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" multiple />

</div>

CSS

.thumb{
    width:100px;
    margin:5px;
    float:left;
}

.uploader{
    clear:both;
}

JavaScript

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


function MyCtrl($scope) {
    $scope.stepsModel = [];

    $scope.imageUpload = function(event){
         var files = event.target.files; //FileList object
         
         for (var i = 0; i < files.length; i++) {
             var file = files[i];
                 var reader = new FileReader();
                 reader.onload = $scope.imageIsLoaded; 
                 reader.readAsDataURL(file);
         }
    }

    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.step=e.target.result;
        });
    }
}