JSFiddle - React, Tailwind, and code Playground

by Upal_Roy

HTML

<div ng-app="test">
    <div ng-controller="UploadCtrl">
        <table>
            <tr ng-repeat="i in [1, 2, 3, 4]">
                <td>{{i}}</td>
                <td>
                    <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
                    <img  ng-src="{{ thumbnail[$index].dataUrl }}" height="50px" />
                </td>
                <td>
                    <img ng-if="!thumbnail[$index].dataUrl "ng-src="http://s13.postimg.org/w0v662g93/pink_04.png" height="50px" />
                </td>
            </tr>
        </table>
    </div>
</div>

CSS

[url=http://postimg.org/image/3nzofluir/][img=http://s13.postimg.org/3nzofluir/pink_04.jpg][/url]

JavaScript

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {

    $scope.thumbnail = {
        dataUrl: []
    };

    $scope.fileReaderSupported = window.FileReader != null;
    $scope.photoChanged = function (files, index) {
        if (files != null) {
            var file = files[0];
            var index = this.$index;
            if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
                $timeout(function () {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(file);
                    fileReader.onload = function (e) {
                        $timeout(function () {
                            $scope.thumbnail[index] = {dataUrl: e.target.result};
                        });
                    }
                });
            }
        }
    };
});