JSFiddle - React, Tailwind, and code Playground

by tictac18g

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-init="ImageSrc ='https://www.google.com/images/srpr/logo3w.png'" file-button>
    <img width="400" ng-src="{{ImageSrc}}" />
  </div>
</div>

JavaScript

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


    })

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

                scope.setimage = function () {
                    var file = $scope.myFile;
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        scope.$apply(function () {
                            $scope.ImageSrc = e.target.result;
                        })
                    }
                }

                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();
                });
            },

            compile: function (element) {
                var fileInput = angular.element('<input type="file" file-model="myFile" multiple />')
                fileInput.css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    'z-index': '2',
                    width: '100%',
                    height: '100%',
                    opacity: '0',
                    cursor: 'pointer'
                });
                element.append(fileInput)
                return this.link;
            }

        }
    })
    ;