JSFiddle - React, Tailwind, and code Playground

by tictac18g

HTML

<div ng-app="myApp" ng-controller="myCtrl" >
        <p>
          Image click preview
        </p>
        <div ng-init="ImageSrc ='https://www.google.com/images/srpr/logo3w.png'" file-button>
            <!--<input type="file" value="submit" file-model="myFile" />-->
            <!--<img width="200" ng-src="{{ImageSrc}}"/>-->
        </div>

JavaScript

angular
    .module('myApp', [])
    .controller('myCtrl', function ($scope) {
    })

    .directive('fileButton', function () {

        var modelInput = '<img ng-src="{{ImageSrc}}"/>';

        return {
            restrict: 'AE',
            template: '<input type="file" file-model="myFile" style="width:100%; height:100%; border:1px solid red; opacity: 0;position: absolute; z-index: 2; cursor: pointer"/>',
            compile: function (template) {

                template.append(modelInput);
                return this.link;
            },
            link: function (scope, element, attrs) {
                scope.setimage = function () {
                    if (scope.myFile) {
                        var file = scope.myFile;
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {
                            scope.$apply(function () {
                                scope.ImageSrc = e.target.result;


                                // var img = new Image();
                                // img.onload = function () {
                                //     //alert(img.width + ' ' + img.height);
                                // };
                                // img.src = e.target.result;
                                // img.width = displayWidth;

                            })
                        }
                    }
                }
            }
        }
    })

    .directive('fileModel', function ($parse) {
        return {
            restrict: 'AE',
            link: function (scope, element, attrs) {

                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function (e) {
                    scope.$apply(function (e) {
                        modelSetter(scope, element[0].files[0]);
                    });
                    scope.setimage();

   ...