Angular Directive to Show File Upload image thumbnail

image_preview.js

angular.module('image-preview-demo',[]).directive('imgPreviewElem', [function () {
    return {
        restrict: 'AE',
        link: function(scope, elem, attrs) {
            console.log("directive called")
            elem.bind('change', function () {
                var file=elem[0].files[0],
                    imageType=/(image.jpeg|image.png|image.jpg)/,
                    imgElementId = attrs.imgPreviewElem;

                //Image match expression
                if(file.type.match(imageType)){
                    var oldImg=document.getElementById(imgElementId), img=document.createElement("img"), thumbDiv = oldImg.parentNode;
                    img.file = file;
                    img.id = imgElementId;
                    thumbDiv.replaceChild(img, oldImg);
                    reader = new FileReader();
                    reader.onload = (function(aImg) {
                        return function(e) {
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file);
                }
                else
                    alert("Unsupported File\nOnly image files(jpeg, jpg, png) are allowed to upload!");
            });
        }
    };
}]);


/* HTML CODE
* <input type='file' img-preview-elem="ui-preview-element">
* <div>
*   <img id='ui-preview-element' />
* </div>
**********/