CODEWITHSUNDEEP
cssangularjs
qazzu
qazzu

Reputation: 411

How to upload image to an existing image src in angularjs, css

I have a table and have a upload picture. I also have a picture that is already displayed. What I want to do is when I upload a new picture it will overwrite the already displayed picture. In my fiddle I have a duck pic and when I upload new pic it display as another image. How can I hide the duck pic when the user upload new pic?

Link in my fiddle: http://jsfiddle.net/DharkRoses/m2qagzzk/6/

sample code:

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

Upvotes: 1

Views: 682

Answers (2)

Upalr
Upalr

Reputation: 2148

Use this code:: demo

<img ng-if="!thumbnail[$index].dataUrl"ng-src="http://s13.postimg.org/w0v662g93/pink_04.png" height="50px" />

Upvotes: 2

Afsar
Afsar

Reputation: 3124

AngularJS views support binary operators

condition && true || false

You can use ng-src with conditions:

<img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />

HTML:

<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)" />                           </td>
            <td>
                <img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />
            </td>
   </tr>

fiddle

Upvotes: 0

Related Questions