JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div
    data-ng-app="angularjstutorial.blogspot.com/2012/12/angularjs-input-file-directive.html"
    data-ng-controller="MainController">
    <input type="file" data-file="param.file"/>
    <div>param.file: {{param.file[0]}}</div>  
    <img src="{{param.file[1]}}" alt="">
    <input type="file" data-file="param.hola"/>
    <div>param.file: {{param.hola[0]}}</div>  
     <img src="{{param.hola[1]}}" alt="">
</div>

JavaScript

var module = angular.module('angularjstutorial.blogspot.com/2012/12/angularjs-input-file-directive.html', []);
module.directive('file', function(){
    return {
        scope: {
            file: '='
        },
        link: function(scope, el, attrs){
            el.bind('change', function(event){
            	  var reader = new FileReader();
                var files = event.target.files;
                var file = files[0];
                scope.file = [file ? file.name : undefined];
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.file.push(loadEvent.target.result);
                        console.log(scope.file)
                    });
                }
                reader.readAsDataURL(event.target.files[0]);
            });
        }
    };
});

function MainController($scope){
    $scope.param = {};
}